html - 如何使 'four corner'与 float div对齐

Question

好的，我的元素要求我的 div float ，因为我想将文本整齐地放在它们的旁边。我可以根据需要让我的 div 左右浮动，但是正如您从代码片段中看到的那样(尽管这不是您从浏览器中获得的，因为尺寸已关闭)，我需要底部的两个 div靠近顶部，以便与两个左浮动的 div 形成完美的正方形。以下是我要查找的内容:

.clear {
  clear: both;
}
#centerbar {
  width: 100%;
  height: calc(100vh - 150px);
  background-color: black;
  float: left;
}
#centerbar h1 {
  text-align: center;
  color: white;
}
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  font-family: courier;
  font-size: 19px;
  color: white;
}
#container {
  min-height: 100%;
  margin-bottom: -150px;
  width: 100%;
}
#container:after {
  content: "";
  display: block;
}
#content {
  display: flex;
  margin: 0 auto;
  width: 800px;
  flex-wrap: wrap;
  justify-content: center;
}
.box {
  height: 200px;
}
.fltlt {
  float: left;
  margin-right: 50px;
}
.fltrt {
  float: right;
  margin-right: 50px;
}

<div class="container">
  <div id="nav">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Works</a>
      </li>
      <li><a href="#">About</a>
      </li>
    </ul>
  </div>
  <div class="clear"></div>
  <div id="centerbar">
    <h1>Sample Layout</h1>
    <div class="box">
      <img src="gold.jpg" alt="The Color Gold" class="fltlt">
      <p>This is some sample text</p>
    </div>
    <div class="clear"></div>
    <div class="box">
      <img src="grey.jpg" alt="The Color Grey" class="fltlt">
      <p>This is some sample text</p>
    </div>
    <div class="box">
      <img src="orange.jpg" alt="The Color Orange" class="fltrt">
      <p>This is some sample text</p>
    </div>
    <div class="box">
      <img src="red.png" alt="The Color Red" class="fltrt">
      <p>This is some sample text</p>
    </div>
  </div>
</div>
<div id="footer">
  <div class="wrap">
    <div class="sub">Lorem Ipsum</div>
    <div class="sub">Lorem Ipsum</div>
    <div class="sub">Lorem Ipsum</div>
  </div>
</div>

Answer 1

我建议不要使用 float 进行布局，因为您是从 flex 开始的，所以请一直使用它。

奖励:CSS 和标记的干净、简单且可读的结构。

.container .row {
  display: flex;
  flex-wrap: wrap;
}
.row .box {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.box img {
  width: 100px;
  margin-right: 10px;
}

<div class="container">
  <div class="row">
    <div class="box">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="">
        <p>Some paragraph here</p>
    </div> 
    <div class="box">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="">
        <p>Some paragraph here</p>
    </div>
    <div class="box">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="">
        <p>Some paragraph here</p>
    </div>
    <div class="box">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSr2zmmalj8xwazqph9jB97VW8MgfrfJ_ThJt9iTGKGMNl-7dp7mKnfvg4" alt="">
        <p>Some paragraph here</p>
    </div>
  </div>
</div>