css - 当左列 div 大于右列 div 时，div 重叠

Question

我在一个页面上创建多个 3 列 div。我注意到如果左列 div (data_cell1) 比右列 div (data_cell3) 长。下面的 div 向上进入上面的 div 并与之重叠。

我需要在我的 css 中更改什么以允许在每个 div 包装器之间进行分隔？

如果左列div和右列div的大小相同，那么我就没有这个问题。

这是代码示例: http://jsfiddle.net/huskydawgs/UMf3k/77/

      <div class="wrapper-data">
    <div class="data_row">
      <div class="data_cell1">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div> 
      <div class="data_cell2">

      </div>
        <div class="data_cell3">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      </div>
      </div>
  </div>

  <div class="wrapper-data">
    <div class="data_row">
      <div class="data_cell1">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
            </div> 
      <div class="data_cell2">

      </div>
        <div class="data_cell3">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      </div>
      </div>
  </div>


  <div class="wrapper-data">
    <div class="data_row">
      <div class="data_cell1">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
            </div> 
      <div class="data_cell2">

      </div>
        <div class="data_cell3">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      </div>
      </div>
  </div>

Answer 1

由于您在某些元素上使用了float，因此您需要clear 才能让父元素占据完整的高度，我使用了这种技术:

.data_row:after {
  content:" ";
  display:block;
 clear:both;
}

你可以看到更多关于这个here和你的演示 here