2

左に固定したままにしたいメニュー div がありますが、スクロールする残りのコンテンツはその右に浮かんでいます。私は 20% 幅のメニュー、80% 幅のトップ ボックス、20% 幅のトップ ボックスの下のボックスを持っているので、すべてが画面いっぱいに並ぶはずです。唯一のことは、div が固定の後ろに浮いていることです。これを修正する最善の方法は何ですか?

これが jfiddle http://jsfiddle.net/8y2t2/14/です。

「maintop」div は、「leftnav」div の後ろに浮かんで「portolfio」ボックスがその横に浮かぶのではなく、画面の残りの 80% の幅を埋める必要があります。私が行方不明になっているこれに対する簡単な解決策があるように感じますか？何か案は？

* { 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によってドキュメントフローからが削除されるためです。サイズは20％です#leftnavが、別のレイヤー上にあるかのように機能し、他の2つの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 に答える