對於我想要製作的佈局的一部分,我想使用三個div,它們都是相互浮動的。左和右有一個最大寬度設置,這工作正常,但我希望中間股利擴大其寬度,以填補餘下的空間。爲了澄清,左和右div可能有從0px到最大寬度的任何地方的寬度,這取決於每個中的內容,並且我希望中間div擴大其寬度,以便佔用剩餘的空間而不是由任何一方的div使用。如何設置一個浮動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來儘可能地完成。
謝謝!
這是正確的。 – jlmakes 2010-11-09 04:52:47
很棒!謝謝! – Nick 2010-11-09 08:56:28
這個答案只是讓我的一天,謝謝! – 2012-08-31 20:43:37