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

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;
}