0

右上隅と左上隅の両方に固定メニュー (どちらも幅 50px) と、中央に幅 900px のコンテンツ領域 (難しくありません) を持つレイアウトを作成しようとしています。ただし、ユーザーがブラウザー ウィンドウのサイズを変更するときは、すべての DIV 要素の幅を保持する必要があります。つまり、DIV が他の DIV の下または上に移動することは望ましくありません。ブラウザー ウィンドウが 1000px (ページ上の要素の合計幅) よりも小さくなると、水平スクロール バーが強制的に表示されるようにします。

ここに私がこれまでに得たものがありますが、明らかに正しくありません: http://linomeoli.com/test

コードは次のとおりです。

<style type="text/css">

div#sideleft {
    position:fixed;
    width:50px;
    height:90px;
    top:20px;
    left:20px;
}

div#sideright {
    position:fixed;
    width:50px;
    height:90px;
    top:20px;
    right:20px;
}

div#middle {
    width:900px;
    margin:auto;
}

</style>

<body>

<div id="sideleft">
This shit<br />
that shit<br />
</div>

<div id="middle">
<img src="http://dispose.co/images/dulla_01.jpg" />
<img src="http://dispose.co/images/dulla_02.jpg" />
<img src="http://dispose.co/images/dulla_03.jpg" />
<img src="http://dispose.co/images/dulla_04.jpg" />
<img src="http://dispose.co/images/dulla_05.jpg" />
<img src="http://dispose.co/images/dulla_06.jpg" />
</div>

<div id="sideright">
previous<br />
next<br />
and whatever
</div>


</body>

これは非常に単純な作業である必要があることはわかっています。しかし、私は立ち往生しています！助けを求める前に、これを解決するためにかなりの時間を費やしたことを約束します. どんな助けでも大歓迎です。

ありがとう

4

1 に答える 1

0

固定された配置を取り除き、すべての div を左にフロートさせると、それらは互いに重なりません。次に、中央の div を離したい幅にするか、別の div を作成してその中央の div を包み込み、離したい幅にすることができます。幅をパーセンテージにして、さまざまな画面サイズに合わせて変更することもできます. 右の div と中央の div の間にどれだけのスペースがあっても、右の div を確実に右端に配置したい場合は、それを右にフロートさせます。

于 2013-03-10T02:52:22.637 に答える