你會如何實現這個HTML/CSS佈局？

假設你有一個非常簡單的設計中心，一個500px的格在視口中居中margin: 0 auto;：你會如何實現這個HTML/CSS佈局？

|<- auto -> +------ 500px -----+ <- auto ->| 
|   |     |   | 
|   |     |   | 
|   |     |   | 
|   |     |   | 
|   |     |   | 
|   |     |   | 
|   |     |   | 
|   +--------------------+   |

，然後你想一點點的導航元素添加到左

|<- auto -> +------ 500px -----+ <- auto ->| 
| +--------|     |   | 
| | 200px |     |   | 
| |  |     |   | 
| |  |     |   | 
| |  |     |   | 
| +--------|     |   | 
|   |     |   | 
|   +--------------------+   |

但保持主頁div在頁面上居中，怎麼辦？

我想出了一個解決方案，其中涉及一些額外的div，但它不完全優雅。

您的解決方案是什麼？

編輯：謝謝大家。這看起來很瘋狂，但是讓我感到很難的是，我從來沒有考慮過將導航欄作爲主分區的孩子。我不知道爲什麼。我的大腦可能會被打破。但沒有技術上的原因，爲什麼不呢，我需要練習更多側面思考。再次感謝。

來源

2011-05-07 AmbroseChapel

在這類問題中，您應該始終指出目標CSS合規性。 – entonio 2011-05-07 08:56:49

在這裏，你走了，我使用了一些更小的尺寸，所以它看起來井的jsfiddle。很明顯，您可以在最終設計中更改尺寸。（主width:500px和側width:200px和left:-200px）

DEMO： http://jsfiddle.net/2GN9M/1/

HTML

<div class="main"> 
    <div class="side"> 
    </div> 
</div>

CSS：

.main { 
    width: 150px; 
    margin: auto; 
    height: 150px; 
    background: red; 
    position: relative; 
} 

.side { 
    position: absolute; 
    left: -50px; 
    top: 10px; 
    width: 50px; 
    height: 100px; 
    background: blue; 
}

來源

2011-05-07 09:00:14 Bazzz

如果用jsfiddle發佈答案，請在這裏發佈答案，以供將來的讀者閱讀。 – Gazler 2011-05-07 09:00:49

@Gazler，好點，我剛剛在你添加評論的時候這樣做。 :) – Bazzz 2011-05-07 09:01:55

這個技巧在body元素上有一個'min-width'，如果你不想在窗口變窄時忽略「side」 - 'min-width'應該是'content width +（2 x side寬度）' – clairesuzy 2011-05-07 09:28:07

您可以使用可用於大多數當前主流瀏覽器的負邊距。

http://jsfiddle.net/yVHzU/

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

CSS：

#center 
{ 
margin: 0 auto; 
background-color: #ff0000; 
width: 500px; 
} 

#left 
{ 
    margin-left: -200px; 
    background-color: #ffff00; 
    width: 200px; 
}

切緣陰性是有效的CSS。 http://www.w3.org/TR/CSS2/box.html#margin-properties

來源

2011-05-07 08:58:27 Gazler

你可以給你的200像素的風格{position：absolute; top：50px; left：200px; }

您可能需要將200px div放入其位置屬性已設置的另一個div內。

來源

2011-05-07 08:58:30 Marklar

將左邊的位設爲主格的子集，設置爲position: absolute，然後設置left: -200px。

來源

2011-05-07 08:59:44 Matt

嘗試它像

<div id="Wrapper"><div id="nav"></div></div> 

#nav { position:absolute; left:-200px; width:200px;} 
#wrapper { position:relative; width:500px; margin: 0 auto; }

來源

2011-05-07 08:59:47

你可以這樣做......我只是不比如使用負數。老年人I.E能搞笑

<div id="nav"></div> 
<div id="main"></div>

#nav { 

float:left; 
margin-top:10px; 
width: 50px; 
height: 100px; 
background: blue; 
} 

#main { 
float:left; 
width: 150px; 
height: 150px; 
background: red; 
}

您的概率需要一個< DIV的風格= 「明確：既;」 > </div >在底部

來源

2011-05-07 10:42:17 Hatzi

你會如何實現這個HTML/CSS佈局？

回答

相關問題