用CSS中間列的靈活寬度

我有一個三列layoyut - 左，中，右。用CSS中間列的靈活寬度

<div id="content-area" class="clearfix"> 

    <div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div> 

    <div id="content-middle"><f:format.html>{content_middle}</f:format.html></div> 

    <div id="content-right"> 
     <f:format.raw>{navigator}</f:format.raw> 
     <f:format.raw>{content_right}</f:format.raw> 
    </div> 

</div>

這個CSS

#all-wrapper { 
    width: 960px; 
    margin: 0 auto; 
} 

#content-area { 
    padding: 10px 0; 
    margin: 5px auto; 
} 

#content-left { 
    float: left; 
    width: 180px; 
    min-height: 400px; 
} 

#content-middle { 
    width: 600px; 
    text-align: left; 
    padding: 0 10px; 
    line-height: 20px; 
} 

#content-right { 
    float: right; 
    min-width: 180px; 
    min-height: 200px; 
    text-align: left; 
}

留下的是180像素，中間爲600像素，右爲180像素，使其成爲一個960像素的佈局，像這樣。

http://jsfiddle.net/kxuW6/

在大多數情況下，這可以作爲intendend，但我想中間一欄根據在右列中的內容具有一定柔性的寬度。它我把一幅圖像放在寬度爲360px的右欄中，中欄寬爲420px。

我的問題是，圖像的寬度超過180px，FX。爲360px，將打破列的浮動，按本小提琴

http://jsfiddle.net/5hNy5/

我把它想它是這樣的小提琴，但沒有在中間一列固定寬度。

http://jsfiddle.net/Eqwat/

來源

2013-10-28 Morten Hagh

使用display: table-cell代替花車......

如果要支持更多的瀏覽器近代，你可以嘗試：

#content-area { 
    width: 960px; 
    padding: 10px 0; 
    margin: 5px auto; 
    display: table; 
    border: 1px dashed blue; 
} 
#content-left { 
    display: table-cell; 
    border: 1px dotted blue; 
    vertical-align: top; 
    width: 180px; 
    height: 200px; 
} 
#content-middle { 
    display: table-cell; 
    border: 1px dotted blue; 
    vertical-align: top; 
    text-align: left; 
    padding: 0 10px; 
    line-height: 20px; 
} 
#content-middle p { 
    margin-top: 10px; 
} 
#content-right { 
    display: table-cell; 
    border: 1px dotted blue; 
    vertical-align: top; 
    width: 180px; 
    height: 200px; 
    text-align: left; 
}

一個表細胞行爲的寬度值就像最小值一樣，所以如果你插入一個圖像到左邊和右邊列，中間列將會調整以佔用剩餘寬度。

見演示在：http://jsfiddle.net/audetwebdesign/V7YNF/

來源

2013-10-28 15:14:20

不錯，簡單！謝謝！我不太清楚display：table是否足夠好解決方案 - divs vs. tables Works perfect –

如果你是罰款洗牌列源順序，你可以貶謫#content-middle至底部，並給它display: block和overflow: hidden。

標記：

<div id='all-wrapper'> 
    <div id="content-area" class="clearfix"> 
     <div id="content-left"></div> 
     <div id="content-right"></div> 
     <div id="content-middle"></div> 
    </div> 
</div>

CSS

#all-wrapper { 
    width: 960px; 
    margin: 0 auto; 
    } 

#content-left { 
    float: left; 
    width: 180px; 
    min-height: 400px; 
    } 

#content-middle { 
    display: block; 
    overflow: hidden; 
    } 

#content-right { 
    float: right; 
    min-width: 180px; 
    min-height: 200px; 
    }

現在中間列將佔用可用空間時，右列的寬度變化。

演示：http://dabblet.com/gist/7200659

必讀：http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

來源

2013-10-28 17:13:19 carpenumidium

應該解決上述最短的形式：

HTML：

<div class="area"> 
    <div class="side"></div> 
    <div>Some content here</div> 
    <div class="side"></div> 
</div>

CSS：

<!-- language: CSS --> 

.area { 
    width: 100%; 
    display: table; 
} 
.area > *{ 
    display:table-cell; 
} 

.side { 
    width: 100px; 
    background-color:gray; 
}

參見this fiddle。

來源

2014-04-22 17:47:06 Gleno

用CSS中間列的靈活寬度

回答

相關問題