Question

我知道之前可能已经谈过这个问题，但我需要一些专业知识。

我有一个div标签

<div id="body">
   <div id="menu">
   </div>

   <div id="content">
   </div>
</div>

我需要的是菜单向左浮动并且是200px而右边的内容坐在它旁边但是100％或宽度的其余部分是什么？任何想法如何实现这一目标？

请参阅http://jsfiddle.net/vBUhD/我能做的最好的事情吗？

Answer 1

类似

#menu{
float: left;
width: 200px;
margin-left: -100%;
position: relative;
}

#content {
padding: 0 0 0 220px;
}

#body {
width: 100%;
float: left;
overflow: hidden;
}

Answer 2

您应该可以使用CSS完成此操作：

#body { width: 100%; }

#menu {
    width: 200px;
    background-color: lightGray;
    min-height: 50px;
    float: left;
}

#content {
    width: 100%;
    min-height: 50px;
    background-color: lightBlue;
}

以下是jsfiddle：http://jsfiddle.net/jSUNt/

内容将在左侧菜单中流动。

Answer 3

示例小提琴：http://jsfiddle.net/AMbRU/

如您所见，只需将float: left添加到菜单中，并将某种清算技术应用于父级

HTML Div定位与静态菜单

3 个答案: