你会如何实现这个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布局？

回答

相关问题