在屏幕中央固定寬度的div，兩邊的任何一邊用來填充屏幕的其餘部分？

所以，我在這裏有這個美好的形象：在屏幕中央固定寬度的div，兩邊的任何一邊用來填充屏幕的其餘部分？

而且它是什麼是一個網站的標題 - 點擊它來查看它全尺寸..

我需要重新創建這使用HTML/CSS /圖像，我無法弄清楚如何。它必須是100％寬度，漸變從一種類型轉換到另一種類型的點必須在調整大小時保持在同一位置。爲了說明：

未塗黑必須始終停留在頁面的中心，而不是移動區域。黑色區域必須延伸至屏幕寬度的100％並具有平鋪的背景漸變。

這怎麼辦？

我試圖這樣的事情：

凡綠色是具有固定寬度的格並居中黃色是「捻」梯度位，然後紅色/藍色是平鋪梯度。但是這不起作用，因爲在瀏覽器調整大小時，平鋪漸變不符合「旋轉」的位置。

注意：這必須支持IE7 +，並且必須是跨瀏覽器兼容的，最好不使用JavaScript。

來源

2011-09-02 betamax

我不知道爲什麼你真的想通過將圖像切成碎片來實現這個目標？

拍攝圖像，將畫布延伸至5000px，然後重複兩側的漸變。你可能會增加大約200字節（是，字節，而不是千字節）到圖像大小，但是你可以把它全部加起來，而不需要爲單獨的頁面添加2個請求。

然後只需將圖像設置爲background-position：center top;

Extened image here

而作爲中心DIV是固定的寬度，既可以添加一個容器有背景或背景添加到BODY例如。

來源

2011-09-02 13:43:59 margusholland

是的，你是對的，我認爲我是在複雜的事情..我做了7000像素寬的圖像和使用後[ImageOptim]（http://imageoptim.pornel.net/），它只有3,282字節！ – betamax

嗯，我想我已經成功地做到這一點..

<header> 
    <div id="bg-left"></div> 
    <div id="bg-right"></div> 
    <div id="header-content"> 
     My header contents 
    </div> 
</header>

而且

header { 
    height:88px; 
} 
header #header-content { 
    width:1004px; 
    height:88px; 
    position:absolute; 
    left:50%; 
    margin-left:-502px; 
    background-image:url("/img/header-bg-middle.png"); 
} 
header #bg-left, header #bg-right { 
    position:absolute; 
    height:88px; 
} 
header #bg-left { 
    background-image:url("/img/header-bg-left.png"); 
    width:50%; 
} 

header #bg-right { 
    width:50%; 
    background-image:url("/img/header-bg-right.png"); 
    right:0px; 
}

所以基本上，我創建的頁面中央固定寬度的DIV，和然後我創建兩個具有適當漸變背景的50％寬度的div。

來源

2011-09-02 12:21:57 betamax

標識做同樣的事情，你開始與一個「捻」做做文章，在外面兩個div ...我會做到這一點的方法是這樣的：

這就是我：

<div style="width:100%"> 
     <div style="background:#333; position:absolute; left:50%; top:0; width:50px; margin:auto; height:50px; z-index:10;"> 
     </div> 
     <div style="width:50%; position:absolute; left:0; top:0; background-color:#060; height:50px; margin:0; z-index:1"> 
     </div> 
     <div style="width:50%; position:absolute; right:0; top:0; background-color:#060; height:50px; margin:0; z-index:2"> 
     </div> 
    </div> 
    </div>

可以在這裏看到：http://sunnahspace.com/TEST.php

基本上你有一個div容器，如果你決定在所有的ID走動這使得相對定位的哪個。然後你拿出梯度變化的部分，並使你的第一個內部div，不同的梯度你的第二和第三格。基本上，第一個div（「扭曲」）被定位在瀏覽器的相同位置（中間，看到50％，但可以設置爲從右邊200px等），其他兩個瀏覽器窗口大小發生變化時div擴展。 z-index將css分層，所以z-index爲10的第一個在最上面（只要它是最高的數字，數字就沒有問題了，但如果這樣留下來就可以在下面添加更多圖層改變z-index，其他兩個z-index爲1和2，只要它們小於頂部div，它並不重要，這讓第一個div坐在這兩個div上面，隱藏在哪裏他們見面。應該工作，讓我知道它是如何，如果需要生病修復一些事情。

來源

2011-09-02 13:25:10 Nathan

這是你想要做的嗎？ http://jsfiddle.net/nnZRQ/1/

來源

2011-09-02 13:49:33 IMI

在屏幕中央固定寬度的div，兩邊的任何一邊用來填充屏幕的其餘部分？

回答

相關問題