Question

假设你有一个非常简单的居中设计，一个500px的div在视口中心margin: 0 auto;：

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

然后你想在左边添加一个小的nav元素

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

但是将主div保持在页面中心，你将如何做到这一点？

我想出了一个解决方案，其中包含几个额外的div，但它并不完全优雅。

你有什么解决方案？

修改：感谢大家。这看起来很疯狂，但让我这么难的是，我从未考虑过让导航成为主要div的孩子。我不知道为什么。我的大脑可能坏了。但是没有技术上的原因，所以，我需要练习更多的横向思维。再次感谢。

Answer 1

在这里，我使用了一些较小的尺寸，因此它在JSFiddle中看起来很好。显然，你可以改变最终设计的尺寸。（主要width:500px和侧width:200px和left:-200px）

<强>样本： 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;
}

Answer 2

您可以使用负余量，这将适用于大多数当前主流浏览器。

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

Answer 3

尝试类似

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

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

Answer 4

你可以给你的200px div一个{position：absolute; top：50px; left：200px; }

您可能需要将200px div放在另一个设置了position属性的div中。

Answer 5

将左侧位置设为主div的子级，设置position: absolute，然后设置left: -200px。

Answer 6

你可以做到这一点......我只是不喜欢使用减去数字。年长的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;
}

你需要一个＆lt; div style =“clear：both;”＆gt;＆lt; / div＆gt;在它的底部

您将如何实现此HTML / CSS布局？

6 个答案: