Question

首先，大家好。这个问题让我精神错乱，所以我希望有一个简单的解决方案

但我不想用黑客来获得Box 1和（Box 2 + Box 3）相互扩展。所以我只会在包装器上使用背景颜色，因此不明显它们具有不同的高度。

这就是我现在所拥有的：

CSS

#wrapper {
    background:         #000;
    width:              50%; 
    float:              left;
}

#box1 {
    background:         #FF0012;
    width:              65%;
    float:              left;
}

#box2 {
    background:         #141; 
    width:              35%;
    margin-left:        65%;    
}


#box3 {
    background:#AA1232;
    width:              35%;
    margin-left:        65%;
}

HTML

<body>

 <div id="wrapper">

  <div id="box1">

  </div>

  <div id="box2">

  </div>

  <div id="box3">

  </div>

 </div>

</body>

如果你想知道我为什么不在Box 2和3上使用float: right;，因为如果Box 1低于Box 2，那么Box 3将在Box 1下浮动而不是在Box 2下。

问题： 1.将盒子3固定到包装器的底部 2.当在Box 3和Box 2中插入行时，它们不应该溢出 - 而是扩展包装器高度（就像我发布的代码一样）

如果我在方框3上使用position: absolute; bottom: 0;，那么当插入行并且方框3太高时它会溢出方框2。

有关如何解决此问题的任何想法？

Answer 1

我知道为什么它会让你发疯 - 你试图通过非表格方式来解决表问题。为什么呢？

我努力识别表功能：当我想要独立的内容片段共享一个共同的垂直和水平边缘时，通常意味着我想要一个表。

编辑：要使用表格，您需要1）使用rowspan使框1跨越两行，2）垂直对齐框3的内容以确保它始终位于底部。

例如，请参阅说明rowspan here的HTML。这几乎是你想要的，只需摆脱表格边框并将valign =“bottom”添加到第三个单元格。

将垂直可调整大小的Div推到包装器的底部。怎么样？

1 个答案: