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; }使父级获得完整的高度，我使用这种技术：

{{1}}

您可以详细了解此here和您的演示here

Answer 2

将overflow: hidden（或除visible之外的任何内容）添加到包含浮动元素的元素中。

Demo

当左列div大于右列div时，Div重叠

2 个答案: