2

我在 2 个容器中有一些花车。容器需要包围浮动，但保持至少 100% 的高度，它们都是（容器>另一个容器>浮动）。

我已经尝试过最小高度，但显然最小高度需要一个具有精确高度的父级，而不是最小高度。所以它对两个容器都不起作用，只能在外部容器上工作。

在容器上显示 100% 高度的表格似乎可以满足我的要求，使它们至少 100% 高，但如果内容较长，则可拉伸。

问题：

Display:table 杀死容器的宽度。我不能将宽度设置为 100%，因为我需要稍后用边距定义它们的宽度。我需要它们表现得像普通的 div，占用所有可用的水平空间。

我的问题有解决方案吗？

http://jsfiddle.net/Ka3TT/2/

我的代码：

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

​</p>

4

2 回答 2

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

它使三列保持一致并将它们扩展到相同的高度，同时让 div 水平扩展以填满整个可用空间。我不确定你的边距到底是多少，如果封闭的 div 将在包装器内，或者完整的代码会是什么样子，所以你将不得不使用 enclose1 & 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%，这将起作用与将边距放置在 enclose 上的方式相同，但允许它水平扩展。

对不起，冗长的答案，但有点取决于最终目标是什么。

于 2012-11-23T02:31:54.357 回答
1

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

这是一个演示：http: //jsfiddle.net/MadLittleMods/Ka3TT/4/

可能想更改类名...

.float {
    width:100px;
    border:solid 1px black;
    display: table-cell;
}
于 2012-11-23T03:53:13.740 回答