如何创建2行，首先是2行，最后是3行整齐对齐，总是在同一个位置？

Question

我想实现以下布局：

+---------------------------------------------------+
| ItemA                                    ...ItemB |
| ItemC              ItemD                    ItemE |
+---------------------------------------------------+

当多个行放在彼此之下时，ItemD应始终位于同一位置。我想我必须使用某种固定宽度的ItemD？

Answer 1

有许多不同的方法可以使用flex和table等来实现。但我个人更喜欢float方法。它是一个响应式设计，类似于Bootstrap和跨浏览器的网格系统。查看CODEPEN

中的工作示例

<强> HTML

<div class="row clearfix">
  <div class="inside leftDiv">Item A</div>
  <div class="inside middleDiv">&nbsp;</div>
  <div class="inside rightDiv">Item B</div>
</div>

<div class="row clearfix">
  <div class="inside leftDiv">Item C</div>
  <div class="inside middleDiv">Item D</div>
  <div class="inside rightDiv">Item E</div>
</div>

<强> CSS

.row {
  position: relative;
  display: block;
  width: 100%;
  background: #ccc;
}

.inside {
  position: relative;
  float: left;
  width: 33.3%;
  background: #ddd;
}

.leftDiv {
   text-align: left;
}

.middleDiv {
   text-align: center;
}
.rightDiv {
   text-align: right;
}

leftDiv，middleDiv和rightDiv类可以为div实现不同的样式，例如颜色和宽度......