HTML/CSS：3列，可變面和固定居中的中間列

Question

我的問題是與標題。所以我基本上有3列的div。我希望中間的寬度爲980像素，然後我想讓頁眉的左側擴展到瀏覽器窗口的末尾，並且背景顏色爲藍色。至於標題的權利，我希望延長到黑色背景顏色的瀏覽器右側的末端。它種關是這樣的：

< ------------------------------ [藍] [中路頭球攻門] [黑] ---------------------------->

我已經完成了我的研究，到目前爲止我所能找到的都是兩個帶有固定左列的列，右列填充剩餘空間。我想知道這可以如何應用於我的問題？

難道是這樣的：

<div style="width:100%;"> 
    <div style="display:table-cell; background-color:blue;"></div> 
    <div style="width: 980px;">my header</div> 
    <div style="display:table-cell; background-color:black;"></div> 
</div> 

謝謝！

Answer 1

一個簡單的解決方案 - basicaly使用您的確切stying，但把另一block中央table-cell ELEM耳鼻喉科，像這樣span這裏：

<div class="wrapper"> 
    <div class="left"></div> 
    <div class="center"><span>my header</span></div> 
    <div class="right"></div> 
</div> 

我感動了所有內嵌樣式到一個單獨的CSS塊和使用類選擇：

.wrapper { 
    display:table; 
    width:100%; 
} 
.left { 
    display:table-cell; 
    width:50%; 
    background-color:blue; 
} 
.right { 
    display:table-cell; 
    width:50%; 
    background-color:black; 
} 
.center { 
    display:table-cell; 
} 
.center span { 
    display:inline-block; 
    width:900px; 
} 

這裏是一個jsfiddle

，在這裏我做了中心要窄得多，以便更好地展示：jsfiddle

希望這有助於=）

Answer 2

不幸的是，沒有一種超級平滑的方式來做到這一點，它也具有廣泛的兼容性支持。有一個叫做flex或flexbox的CSS規格可以做到你想要的漂亮和優雅，但它現在的支持非常有限。下面是一些資源上實現Flexbox，請過目......

http://css-tricks.com/old-flexbox-and-new-flexbox/

在此期間，你可以達到你想要一些基本的CSS暗中搗鬼，將讓你你想要的佈局，但它需要絕對定位你的中間格。

繼承人的的jsfiddle：http://jsfiddle.net/CW5dW/

這裏的CSS：

.left { 
    width: 50%; 
    height: 300px; 
    float: left; 
    padding-right: 160px; 
    box-sizing: border-box; 
    background: red; 
} 

.right { 
    width: 50%; 
    height: 300px; 
    float: right; 
    padding-left: 160px; 
    box-sizing: border-box; 
    background: blue; 
} 

.middle { 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    left: 50%; 
    padding: 10px; 
    margin-left: -150px; 
    box-sizing: border-box; 
    background: orange; 
} 

這到底是怎麼回事，你可能會問？

基本上，我們正在把div與類中間，並從文檔的流程中刪除它。這使我們能夠左移左邊的div，右邊的div右移，寬度爲50％，以便流暢地佔用瀏覽器的所有空間。

我們再告訴中間DIV佔用的空間300像素（在你的情況下980），和我們告訴它去你的瀏覽器從左邊的總寬度的50％。雖然這並不居中，因爲它是從div的左邊緣計算出來的。因此，我們給它一個寬度爲其一半寬度的負邊距空間，以便將左邊緣移動到div的中心。

然後，因爲我們知道中間div的寬度爲300px（在你的情況980中），我們可以說左邊的div的右邊緣應該有一些填充大於或等於中間div寬度的一半，在我的例子中是150px，而我又增加了10px，所以文本不能直接進入div的邊緣，所以總共160px。我們對於正確的div也做了同樣的事情，但是它的左側。這限制了這兩個div的內容落在我們的中間div下面。

Answer 3

這個答案不是「答案」本身 - 這是給邁克爾@的帖子延長評論。但是，我發佈了另一個答案 - 一個jQuery解決方案。

關於@ Michael的回答（這確實是一個非常整潔的解決方案）有一​​個小問題，如果你刪除了你的高度聲明（OP肯定會），那麼各個列的背景會暴露出來 - 在背景的所有底部邊緣平整，以使設計一致。如果OP的設計沒有列背後的背景，那麼這個解決方案應該沒問題。如果需要背景（這可能由問題措辭來判斷），那麼它可能會很尷尬。兩種解決方案...

1. 一個簡單的JavaScript，掃描頁面的列長度，發現最長，並匹配所有最短的一個最大。

2. 其他（也許更好）的解決方案是把背景放到你已經有的列上（它只需要高1px，我猜） - 只要確保中央白色帶寬爲980px，側列延伸了大約1000像素，以適應最大的瀏覽器

Answer 4

好的，這是我的解決方案。這將向所有用戶呈現一個「普通或花園」三列固定寬度佈局，然後爲支持javascript的用戶（這是我們面對的，是絕大多數用戶）進行調整。這種解決方案的好處是，佈局將像任何普通的3層佈局佈局一樣，沒有使用像絕對定位和固定高度等更高級CSS調整所能體驗到的怪癖。

小提琴這裏... http://jsfiddle.net/vuary/

你應該能夠看到發生了什麼事情與HTML和CSS ......這是基本的東西。 jQuery的是非常直截了當太：

$(document).ready(function(){ 

    // find the width of the browser window.... 
    var docuWidth = $(window).width(); 

    // find the width of the central column as set by the CSS... 
    // (you could hard code this as 980px if desired) 
    var centerWidth = $('#center').width(); 

    // figure out how many pixels wide each side column should be... 
    sideColWidth = (docuWidth-centerWidth)/2; 

    // then set the width of the side columns... 
    $('#left,#right').css({ 
     width:sideColWidth+'px' 
    }); 
}) 

編輯

轉換jQuery的一個功能，當文檔準備好被調用，如果再視口被調整...以防萬一：

http://jsfiddle.net/aKeqf/