如何让我的框 3 与框 2 的右侧对齐？答案

【问题标题】：How do I get my box 3 to align to the right of box 2?如何让我的框 3 与框 2 的右侧对齐？
【发布时间】：2019-10-08 23:41:07
【问题描述】：

我试图让我的“这是框 3”与父容器内的“这是框 2”的右侧对齐。框 3 和框 2 应该重叠并彼此相邻？我曾尝试使用“显示：内联；但是这没有任何作用。任何建议将不胜感激？

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  width: 300px;
  height: 600px;
  border: 5px solid black;
  padding: 20px;
  margin: 0 auto;
}

.box1 {
  height: 50%;
  width: 90%;
  border: 1px solid black;
  padding-top: 10px;
  margin: 0 auto;
  text-align: center;
}

.box2 {
  height: 50%;
  width: 50%;
  border: 1px solid blue;
  text-align: center;
  margin-top: 10px;
}

.box3 {
  height: 50%;
  width: 50%;
  text-align: center;
  border: 1px solid red;
  float: right;
}

<div class="container">
  <div class="box1"> this is box 1 </div>
  <div class="box2"> this is box 2 </div>
  <div class="box3"> this is box 3 </div>
</div>

【问题讨论】：

标签： html css css-float inline

【解决方案1】：

添加float: left 到.box2 和marign-top: 10px 到.box3：

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  width: 300px;
  height: 600px;
  border: 5px solid black;
  padding: 20px;
  margin: 0 auto;
}

.box1 {
  height: 50%;
  width: 90%;
  border: 1px solid black;
  padding-top: 10px;
  margin: 0 auto;
  text-align: center;
}

.box2 {
  height: 50%;
  width: 50%;
  border: 1px solid blue;
  text-align: center;
  margin-top: 10px;
  float: left;
}

.box3 {
  height: 50%;
  width: 50%;
  text-align: center;
  border: 1px solid red;
  float: right;
  margin-top: 10px;
}

<div class="container">
  <div class="box1"> this is box 1 </div>
  <div class="box2"> this is box 2 </div>
  <div class="box3"> this is box 3 </div>
</div>

【讨论】：

【解决方案2】：

您可以在.container 上使用display: flex 和flex-wrap: wrap：

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 300px;
  height: 600px;
  border: 5px solid black;
  padding: 20px;
  margin: 0 auto;
  text-align: center;
}

.box1 {
  height: 50%;
  width: 90%;
  border: 1px solid black;
  margin-bottom: 10px;
  padding-top: 10px;
}

.box2,
.box3 {
  height: 50%;
  width: 50%;
}

.box2 {
  border: 1px solid blue;
}

.box3 {
  border: 1px solid red;
}

<div class="container">
  <div class="box1"> this is box 1 </div>
  <div class="box2"> this is box 2 </div>
  <div class="box3"> this is box 3 </div>
</div>

【讨论】：

虽然在支持 flex-wrap 的浏览器中效果很好，但还有其他更好的支持方式来实现这一点。
现在是 2019 年 - 除非您需要支持 IE 10 或更低版本，否则 flexbox 是更好的解决方案。
我更多地考虑的是较旧的 Android 设备。在您看来，是什么让 Flex 在这方面做得更好？
Flexbox 是一种布局解决方案，不像inline-blocks 或浮动。
你说得有道理。浮动并不打算用于布局。所以你是理想主义者？我是一个实用主义者。

【解决方案3】：

您可以使用此代码

        body {
            margin: 0;
            padding: 0;
        }
        html {
            box-sizing: border-box;
        }
        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }
        .container {
            width: 300px;
            height: 600px;
            border: 5px solid black;
            padding: 20px;
            margin: 0 auto;
        }
        .box1 {
            height: 50%;
            width:100%;
            border: 1px solid black;
            padding-top: 10px;
            margin: 0 auto;
            text-align: center;
        }
        .box2 {
            height: 50%;
            width: 50%;
            border: 1px solid blue;
            text-align: center;
            float: left;
        }
        .box3 {
            height: 50%;
            width: 50%;
            text-align: center;
            border: 1px solid red;
            float: right;
        }

    <div class="container">
        <div class="box1"> this is box 1 </div>
        <div class="box2"> this is box 2 </div>
        <div class="box3"> this is box 3 </div>
    </div>

【讨论】：