創建一個具有一個流體側的接頭

請參閱附加的線框。我正在使用blueprint css。我希望除了標題之外的所有東西都在980像素的容器中。創建一個具有一個流體側的接頭

對於標題，我希望左欄是流暢的。總是越來越接觸瀏覽器的左側。你怎樣才能建立一個容器，只有一邊是流體的頭部？

我希望線框有助於解釋問題。如果沒有，請讓我知道。由於

Wireframe

2012-01-21 AnApprentice

讓我看看，如果我是正確的，你想你的頭始終是在頂部和左上角權利，不影響容器的位置？那麼爲什麼你不把這個標題從你的容器中取出來，確保你的body margin設置爲0，這樣你的header實際上就是完全位於文檔的頂部和左邊角落，並使你的標題具有絕對的位置。

body { 
    margin: 0px; 
} 

.header { 
    width: 200px; 
    position:absolute; 
} 
.container { 
    width: 980px; 
    margin:0 auto; 
} 

<body> 
<div class="header"></div> 
<div class="container"></div> 
</body>

來源

2012-01-21 19:05:56 Paradise

對不起，不是這樣。在容器（980px）中，我想要一個寬度爲200px的標題，位於容器的左側。然後在容器外面，在body中，我想要一個div從瀏覽器的左邊緣延伸到頁眉（200px單元），但不能超過這個。我不希望流體標題bkg一直到正確的瀏覽器一側。這有幫助嗎？ – AnApprentice

不知道我是否正確理解你的問題，但我認爲要做到這一點的唯一方法是與容器和橫幅區域的z-index的玩弄。

例如，你的CSS是：

body { margin: 0; } 
#container { width:980px; margin: 0 auto; z-index: 1; background-color: black; height:500px; } 
#logo { width:200px; height:50px; background-color: red; } 
#header-left { position: absolute; top:0; left:0; height:50px; width:50%; z-index: 0; background-color: red; }

然後爲HTML代碼：

<div id="header-left"></div> 
<div id="container"> 
    <div id="logo"></div> 
</div>

希望這有助於。

來源

2012-01-22 05:53:15 smilledge

創建一個具有一個流體側的接頭

回答

相關問題