html - css 可变长度列延伸太远 - 清除 :float issue?

Question

不是前端 UI，但有一个(可能)非常容易解决和更新此问题的问题 css variable length columns extending too far .我在这个屏幕截图和 fiddle 中显示了两个 float 元素 http://jsfiddle.net/trestles/U7mYT/ .一个向左浮动，另一个(index-right-content)向右浮动。 float 的右侧 div 有两列内容。第二列更长，但不会展开盒子以向下推容器。 index-right-content 是posistion:relative。

我可以看到，如果我扩展中间列，它会扩展 index-right-content 但右手列不会那样做。

谢谢

Answer 1

您对第二列使用绝对定位，这将它从流中移除 - 它不会再影响父 div 的高度。

更好的选择是在右侧 block 中 float 两个列，并添加一个清除元素:

http://jsfiddle.net/U7mYT/3/

<div id='content'>
  <div id='featured-lists'>
    <div class='index-left-list'>
      <div class='index-box'>
        <div class="cluster-box"></div>
      </div>
    </div>
    <div class='index-right-content'>
      <div class='index-box'></div>
      <div class='index-box right'>
        <div class="cluster-box"> </div>
      </div>
      <div class="clear"></div> <!-- added -->
    </div>
    <div style="clear:both;height:1px;overflow:none;"></div>
  </div>
  <div id='footer'> here is footer </div>
</div>

最后一列的 CSS:

.index-box {
    width: 300px;
    float:left;
}

.right {
    float:left;
}
.clear {
    clear:both;
}