如何在沒有絕對定位的情況下以100％的寬度裝配元素？

Question

我正在嘗試使用CSS進行4幀設計，如以下代碼所示：

http://jsfiddle.net/7qBKJ/1/

但我不想使用position:absolute; ，而我正在嘗試這樣做：

topframe: block;
left,right and centerframes: inline-block;

而且我想確保右框架和左框架的寬度均為200px，其余部分應由中心框架填充。 沒有絕對定位，該如何管理？

我嘗試了這個，但是當屏幕寬度減小時，它上下移動幀：

http://jsfiddle.net/V4vAc/2/

在這個小提琴， centerframe與對齊leftframe ，因為它們都是inline-block ，與centerframe規則margin-left:0px; 但我不知道如何設置centerframe的與右對齊rightframe的左，而不指定寬度“。

那么如何使#centerframe的寬度等於屏幕寬度-400 px？

謝謝 ！

Answer 1

您要做的是將兩個側邊欄放在文檔流中。 然后，您將第一個側邊欄向右浮動，將第二個側邊欄向左浮動。

<div id="left"></div>
<div id="right"></div>
<div id="center"></div>

/* main.css */
#left {
    width: 200px;
    height: 100px;
    background-color: blue;
    float: left;
}
#right {
    width: 200px;
    height: 100px;
    background-color: red;
    float: right;
}
#center {
    width: auto;
    height: 100px;
    background-color: green;
    margin: 0 200px;
}

http://jsfiddle.net/samgh/JjsFF/

如果希望center是兩個側邊欄下方的全寬，則可以刪除邊距。 希望這可以幫助。