使顯示：表格填充水平空間沒有設置寬度

我有一些浮在2個容器。容器需要包圍浮體，但保持100％的最小高度，兩者（容器>另一個容器>浮子）。使顯示：表格填充水平空間沒有設置寬度

我已經嘗試了最小高度，但顯然最小高度需要父母確切身高，而不是最小值。所以它不會真的爲兩個容器工作，只能在外部工作。

集裝箱上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%; 
}

來源

2012-11-22 user1721135

這取決於你的利潤將是以後，那種在一個鏡頭是什麼沒有這些信息的黑暗，但你可以嘗試使用類似的東西：

.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將會在一個包裝內或完整的代碼將看起來像什麼，所以你將不得不使用寬度和.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; 
}

如果它只是要與固定寬度的浮動水平擴展的封裝類你可以將整個東西放在寬度爲100％的包裝中，然後將寬度設置爲100％，這與將邊距放在附近但允許它水平擴展的方式相同。

對不起，這是一個很長的回答，但是取決於最終目標是什麼。

來源

2012-11-23 02:31:54 gingabox

基本上我想封閉是100％寬減去他們的邊界。浮體將形成固定液體固定佈局。我的問題是桌子收縮包裝 – user1721135

與包裝工作的訣竅！ – user1721135

:)很好，很高興你找到了你正在尋找的解決方案 – gingabox

如果我得到你想要做的。我會申請一個display: table-cell浮動，而不是浮動它。無論內容如何，這都會使所有塊的高度相同。

這裏是一個演示：http://jsfiddle.net/MadLittleMods/Ka3TT/4/

可能要更改類名...

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

來源

2012-11-23 03:53:13 MLM

我需要支持舊瀏覽器，所以我不能沒有浮動 – user1721135

@ user1721135對不起。我搞砸了一堆的CSS，但IE7只是不會合作。如果你知道某些特定的css可以使它在IE7中正常工作，那麼只需在「* height：100％;」之類的屬性中添加一個「*」前綴。 – MLM

我的不好，顯示：在IE7中根本不支持表格：/我需要以不同方式完成整個事情，而不是使用內聯塊。 – user1721135

使顯示：表格填充水平空間沒有設置寬度

回答

相關問題