2

我有一个菜单 div，我想保持固定在左侧，而滚动的其余内容浮动到它的右侧。我有 20% 宽度的菜单，一个 80% w 的顶框和 20% w 的顶框下方的框，所以它应该全部排列以填满屏幕，唯一的问题是 div 浮动在固定的后面元素而不是它旁边，解决这个问题的最佳方法是什么？

这是 jfiddle http://jsfiddle.net/8y2t2/14/。

“maintop” div 应该填满屏幕剩余的 80% 宽度，而不是漂浮在“leftnav”div 后面并让“portolfio”框漂浮在它旁边。我觉得我缺少一些简单的解决方案？有任何想法吗？

* { margin: 0; }
html, body { height:100%; } 
body {margin:0px;background-color:#fff;}
#leftnav {background-color:#232323;width:20%;min-height: 100%;height:auto!important;float:left;text-align:center;position:fixed;left:0;}
#portfolio {white-space: nowrap;text-align:center;margin:0;}
#portfolio ul {margin:0;padding:0;}
#portfolio li {width: 20%;display:inline-block;text-align: center;vertical-align: middle; margin:0;padding:0;float:left;}
#portfolio img {max-width:100%;margin:0;padding:0;}
#maintop {width:80%;height:45%;background-color:#caab7e;float:left;text-align:center;}

<body>
<div id="leftnav"></div>
<div id="maintop"></div>
<div id="portfolio">
<ul>
    <li><img src="http://dummyimage.com/400x300/000/fff"></li>
    <li><img src="http://dummyimage.com/400x300/090/fff"></li>
    <li><img src="http://dummyimage.com/400x300/900/fff"></li>
    <li><img src="http://dummyimage.com/400x300/009/fff"></li>
    <li><img src="http://dummyimage.com/400x300/000/fff"></li>
    <li><img src="http://dummyimage.com/400x300/090/fff"></li>
    <li><img src="http://dummyimage.com/400x300/900/fff"></li>
    <li><img src="http://dummyimage.com/400x300/009/fff"></li>
    <li><img src="http://dummyimage.com/400x300/000/fff"></li>
    <li><img src="http://dummyimage.com/400x300/090/fff"></li>
    <li><img src="http://dummyimage.com/400x300/900/fff"></li>
    <li><img src="http://dummyimage.com/400x300/009/fff"></li>
</ul>
</div>
</body>
4

1 回答 1

3

使用以下 css#maintop和#portfolio. #leftnav这是有效的，因为您的绝对定位会从文档流中删除。即使#leftnav大小为 20%，它的作用就像它在一个单独的层上，这导致你的其他两个 div 计算它们相对于文档正文的位置。

#maintop {
    width:80%;
    height:45%;
    background-color:#caab7e;
    float:right;
    text-align:center;
}

#portfolio {
    text-align:center;
    float:right;
    width:80%;
    margin:0;
}

http://jsfiddle.net/8y2t2/20/

于 2013-01-13T13:54:21.497 回答