如何制作浮动：左侧工作与表格单元格相同？

Question

我制作了两个CSS布局，一个使用display:table，另一个使用float:left。使用浮动时，black div似乎在其上方的彩色div后面重叠。如何使this看起来与this类似？

Answer 1

添加清除

.image-block
{
  height:300px;
  background-color:black;
    clear:both;
}

Answer 2

通过查看您给出的示例，黑框div位于彩色框div的div之外，例如：

<div class="main-container">
  <div class="colors">
    <div class="col1 float-left"></div>
    <div class="col2 float-left"></div>
    <div class="col3 float left"></div>
  </div>
  <div class="black-box"></div>
</div>

<style>
  .float-left { float: left; }
  .col1 { background-color: red; }
  .col2 { background-color: blue; }
  .col3 { background-color: green; }
  .black-box { background-color: black; }
</style>

...不要忘记为尺寸等添加CSS。我刚给你骨架......