我有這樣的下面的代碼：事業部填充剩餘水平空間

<div class="parent"> 
    <ul class="menu"> 
     <li>this</li> 
     <li>width</li> 
     <li>is</li> 
     <li>dynamic.</li> 
    </ul> 

    <div class="something"> 
     <span>so is this</span> 
     <table>because of this table.</table> 
    </div> 

    <div class="fill"> 
     <span>and so is this. but this guy needs to fill the remaining width.</span> 
    </div> 
</div>

Image

這3項 - UL和2周的div - 是並排排列，並且你可以看到，他們有動力寬度。我必須使這3個項目適合div.parent，其寬度固定在1200px。

目前，我正在使用'float：left;'將這3個項目並排排列，我可以使用'display：inline-block;'如果有必要[完美的作品]。但我試着用'display：table'來使用一些技巧父級和'display：table-cell';'這3個項目，沒有成功。

我需要在黑色div上填充剩餘空間，這是'div.fill'。有任何想法嗎？

EDIT2：http://jsfiddle.net/cAs9t/

來源

2014-01-21 Paulo Mu

試着在你的CSS使用這樣的：'{.fill僞寬度：100％}' – Zzyrk

請張貼相關的CSS以及甚至更好做小提琴。 – otinanai

我試過了，但是它需要.parent的寬度，而不是剩餘的寬度。 –

Demo

只需添加

div.fill { float: none; overflow: hidden; }

凡float: none去除浮動（你也可避免將float: left到.fill），和overflow: hidden（或除visible不同）防止浮動元素重疊.fill。

其他方式：

你可以使用display: table-cell和display: table，但你不能指定哪些元素應該增長到填滿所有剩餘空間。
但是，如果您想完全控制並希望以更復雜的方式分配剩餘空間，則應使用Flexboxes。

來源

2014-01-21 20:36:59 Oriol

完美搭配float：none和overflow：隱藏，非常感謝！ –

@PauloMu你應該接受Oriol的答案，如果它適合你！這就是所有這一切。 – otinanai

對不起，我是新來的：x。謝謝！ –

我將父母display:table和3個孩子作爲display:table-cell。現在，所有3個孩子都填滿了父母的寬度，並且不需要將其中的任何一個浮動。此方法的一個優點是，您可以利用vertical-align，並且還可以避免在父項短於內容時封裝塊。某種程度上，你可以獲得table的所有優點。

您可以設置前2個孩子的寬度，並在不指定寬度的情況下留下最後一個孩子的寬度，以便填充父容器。

See this demo。

來源

2014-01-21 20:38:19 otinanai

感謝您的幫助，但使用'display：table'和'display：table-cell'只是將div.fill和div.something之間的空格錯開了。我猜這是因爲瀏覽器試圖等於所有'display：table-cell'元素的寬度。 –

使用display：表格作爲容器並顯示：table-row爲其直接子項。

設置高度：0爲高度和高度可變的div：auto爲應填充剩餘空間的div。

如果容器需要一個固定的高度，無論是以像素還是％，您都可以使用{overflow-y：auto; height：100％}添加到水平填充並在其中添加內容。

<div style="height:300px; border:1px solid red;padding:2px;"> 
    <div style="display:table; height:100%; width:100%;border: 1px solid blue;"> 
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;"> 
     I take as much space as needed 
    </div> 
    <div style="display: table-row; height:auto; padding:2px; background-color:green;"> 
     <div style="height:100%; overflow: auto;"> 
     <div style="height: 500px">My parent will fill the remaining space</div> 
     </div> 
    </div> 
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;"> 
     <p>I take as much space as needed as well</p> 
    </div> 
    </div> 
</div>

來源

2016-05-26 13:32:30 clearfix

Flexbox的解決方案

注：如果需要，您supported browsers添加柔性供應商前綴。

.parent { 
 
    width: 1200px; 
 
    display: flex; 
 
} 
 
.menu { 
 
    margin: 0; 
 
} 
 
.menu li { 
 
    display: inline-block; 
 
} 
 
.fill { 
 
    flex-grow: 1; 
 
}

<div class="parent"> 
 
    <ul class="menu" style="background: #6cf"> 
 
<li>this</li> 
 
<li>width</li> 
 
<li>is</li> 
 
<li>dynamic.</li> 
 
    </ul> 
 
    <div class="something" style="background: #fd6"> 
 
<span>so is this</span> 
 
<table>because of this table.</table> 
 
    </div> 
 
    <div class="fill" style="background: #5c5"> 
 
<span>and so is this. but this guy needs to fill the remaining width.</span> 
 
    </div> 
 
</div>

來源

2016-11-06 09:20:58

事業部填充剩餘水平空間

回答

Flexbox的解決方案

相關問題