Question

我在2个容器中有一些浮子。容器需要包围浮子，但保持最小高度100％，两者（容器＆gt;另一个容器＆gt;浮子）。

我尝试过最小高度，但显然最小高度需要父母准确的身高，而不是最低身高。所以它对两个容器都不起作用，只能在外层容器上工作。

容器上100％高度的显示表似乎可以满足我的需要，使它们至少100％高，但如果内容更长，则可伸缩。

问题：

显示：表格会杀死容器的宽度。我不能将宽度设置为100％，因为我需要稍后用边距定义它们的宽度。我需要它们像普通的div一样，占用所有可用的水平空间。

我的问题有解决方案吗？

我的代码：

<html>
    <body>
<div class="enclose2">
<div class="enclose1">
<div class="float">
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>

</div>
<div class="float">Float</div>
    <div class="float">Float</div>
</div>
</div>
</body>
</html>

我的CSS：

.float {
    width:100px;
    border:solid 1px black;
    float:left;
}
.enclose1, .enclose2 {
 height:100%;
display:table;
    background-color:#ccc;
}    
body, html {
    width:100%;
    height:100%;
}

Answer 1

这取决于你的边距将会是什么，在没有这些信息的情况下在黑暗中拍摄，但你可能会尝试使用类似的东西：

.float {
border:solid 1px black;
float:left;
height:100%;
width:29%;
margin-left:20px;
}
.enclose1, .enclose2 {
height:100%;
display:table;
background-color:#ccc;
width:100%;
}    
body, html {
width:100%;
height:100%;
}

它使三列保持一致并将它们扩展到相同的高度，同时让divs水平扩展以填满整个可用空间。我不确定你的边距究竟是什么，如果封装div将在一个包装器内或完整代码将是什么样的，所以你将不得不使用enclose1＆amp; 2宽度和.float宽度和边距，以获得您正在寻找的适合度。

注意：我可能也有点困惑，因为你说你希望它们占用所有可用的水平空间，但在浮子上有一个固定的100px宽度，并且不想将封闭设置为100％宽度 - 我已经在示例中完成了，但是原理在封闭时使用固定的宽度和边距，如下所示：

.float {
width:33%;
border:solid 1px black;
float:left;
}
.enclose1 {
height:100%;
display:table;
background-color:#bbb;
width:800px;
margin:50px;
}   

body, html {
width:100%;
height:100%;
}
.enclose2 {
height:100%;
background-color:#ccc;
display:table;
}

如果它只是想要使用固定宽度为100px的浮动水平扩展的封闭类，您可以始终将整个内容放在宽度为100％的包装中：100％添加填充，然后将封装设置为宽度100％这将与将边距放在封闭上的方式相同，但允许它水平扩展。

很抱歉这个冗长的回答，但有点取决于最终目标是什么。

Answer 2

如果我得到你想做的事。我会将display: table-cell应用于浮点而不是浮动它。无论内容如何，这都将使所有块都具有相同的高度。

以下是演示：http://jsfiddle.net/MadLittleMods/Ka3TT/4/

可能想要更改班级名称......

.float {
    width:100px;
    border:solid 1px black;
    display: table-cell;
}

make display：table填充水平空间而不设置宽度

2 个答案: