Question

不是前端用户界面，但有一个（可能）非常简单的问题需要修复和更新此问题css variable length columns extending too far。我在这个屏幕截图中显示了两个浮动元素，并且是http://jsfiddle.net/trestles/U7mYT/。一个是向左浮动而另一个（索引右侧内容）向右浮动。浮动的右侧div有两列内容。第二列长得多，但没有展开盒子以推下容器。索引权利内容是posistion：relative。

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

THX

Answer 1

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

更好的选择是将两个列浮动到右侧块中，并添加一个清晰的元素：

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;
}

Answer 2

您可以添加：

.right {

显示：内联;身高：你的价值; }

并删除该职位。

这应该有用;

Answer 3

您应该浮动所有列，而不是使用绝对定位。你也可以稍微整理一下HTML：

<div class="wrap">
    <div class="left">
        Left column
    </div>
    <div class="right">
        Right column
        <div class="left">
            With two columns
        </div>
        <div class="right">
            In it
        </div>
    </div>
</div>

您可以使用像overflow：hidden;这样的简单clearfix，而不是使用不需要的HTML元素来清除浮点数。而在容器上：

div.wrap {
    width: 960px;
    margin: 0 auto;
    overflow: hidden; /* clearfix */
}

    div.wrap div.left {
        width: 480px;
        float: left;
        overflow: hidden; /* clearfix */
    }

    div.wrap div.right {
        width: 480px;
        float: right;
        overflow: hidden; /* clearfix */
    }

        div.wrap div.left div.left, 
        div.wrap div.right div.left, 
        div.wrap div.left div.right, 
        div.wrap div.right div.right {
            width: 240px;
        }

我肯定会尝试为我的课程命名一些与设计相关的东西（如小学和中学而不是左右）。

css变长列扩展得太远 - 明确：浮点问题？

3 个答案: