如何設置一個浮動div的寬度來佔用剩餘空間而不推動其他div？

Question

對於我想要製作的佈局的一部分，我想使用三個div，它們都是相互浮動的。左和右有一個最大寬度設置，這工作正常，但我希望中間股利擴大其寬度，以填補餘下的空間。爲了澄清，左和右div可能有從0px到最大寬度的任何地方的寬度，這取決於每個中的內容，並且我希望中間div擴大其寬度，以便佔用剩餘的空間而不是由任何一方的div使用。

現在的問題是，如果中間div中有很多內容，它會擴展並將右側div推到下一行，而不是與其他兩個內容保持一致。

這裏的CSS我到目前爲止：

#left-column { 
width: auto; 
max-width: 200px; 
height: auto; 
float: left; 
} 

#middle-column { 
float: left; 
width: auto; 
} 

#right-column { 
width: auto; 
max-width: 200px; 
height: auto; 
float: right; 
} 

...和HTML：
<div id="left-column">...</div>
<div id="middle-column">...</div>
<div id="right-column">...</div>

我認爲這可以用一個三列，單行表來完成，但我絕對做不是想要使用表 - 我想通過使用純CSS來儘可能地完成。

謝謝！

Answer 1

經典花車

如果你命令它：

<div id="left-column"></div> 
<div id="right-column"></div> 
<div id="middle-column"></div> 

，你漂浮離開了左側立柱，右列右側，中間一欄應填寫的剩餘空間。儘管如此，您仍然會遇到一些邊距，邊框和填充問題。

---

Flexbox的

如果沒有需要支持舊的瀏覽器，你可以使用Flexbox的。使用flexbox，這種結構變得更加簡單，並且標記不需要改變。

您將需要能夠選擇父元素，因此對於本演示的目的，代碼將被包裝<div class="wrapper">。

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    height: 200px; 
 
} 
 

 
.left { 
 
    background-color: red; 
 
    width: 100px; 
 
} 
 
.middle { 
 
    background-color: green; 
 
    flex: 1; 
 
} 
 
.right { 
 
    background-color: blue; 
 
    width: 100px; 
 
}

<div class="wrapper"> 
 
    <div class="left"></div> 
 
    <div class="middle"></div> 
 
    <div class="right"></div> 
 
</div>

的高度和寬度，以便<div> s爲可見的明確添加。有了實際的內容，這些列將自動調整。

Answer 2

我不想在這裏疏通了一個古老的線程，但我一直在尋找一個解決方案，以我自己的問題和碰到這個來了，我想我會與弗朗西斯更好地共享......

表是一個定位佈局的可怕想法，主要的問題是，在表格在瀏覽器中顯示/呈現之前，它必須呈現它的</table>標記。

你能想象一下，如果Facebook的專欄內容爲其佈局使用了一張表格，那麼在檢查您的時間線時，需要多長時間才能將任何內容呈現在屏幕上！ 另一個問題是，在每個瀏覽器中表格的行爲都非常不同。

基本上：<table> for layout = NO !, <table>列出了數據或信息行= YES！