我有一个菜单 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>