7

ページを 3 列にレイアウトしようとしています。ページに合わせて中央の列のサイズを変更したいのですが、問題は、ページを非常に狭くすると、左の列が中央の列の下にスライドすることです (フロートを使用して配置する場合)。列）またはそれが重なっています（絶対配置を使用している場合）。最小幅に達して移動を停止したら、右側の列を中央の列に「ぶつけて」、この時点でページに水平スクロールバーが表示され始めるはずです。

以下は、絶対配置を使用した私の試みです。

h2 {
  margin-top: 0;
}

#leftside {
  position: absolute;
  left: 0;
  width: 200px;
}

#rightside {
  position: absolute;
  right: 0;
  width: 150px;
}

#content {
  min-width: 200px;
  margin: 0 150px 0 200px;
}
<div id="leftside">
  <ul>
    <li><a href="">Left Menu 1</a></li>
    <li><a href="">Left Menu 2</a></li>
  </ul>
</div>
<div id="rightside">
  <ul>
    <li><a href="">Right Item 1</a></li>
    <li><a href="">Right Item 2</a></li>
  </ul>
</div>
<div id="content">
  <h2>Content Title</h2>
  <p>Some paragraph.</p>
  <h2>Another title</h2>
  <p>Some other paragraph with total nonsense. Just plain old text stuffer that serves no purpose other than occupying some browser real-estate</p>
</div>

4

2 に答える 2

6

divラッパーを使用してmin-width、最終的にはこれを行うことができるはずですoverflow: http://jsfiddle.net/5zsyj/

ウィンドウのサイズを変更してみてください。列が の場合は< 300px、要素自体のサイズを変更したり、お互いの上に浮かんだりするだけでなく、スクロール バーが表示されます。

于 2013-01-27T23:04:11.723 に答える
6

解決策は、これを CSS に追加することです。

html {
min-width: 550px;
position: relative;
}

デモ: http://jsfiddle.net/4PH4B/

基本的な考え方は、ページがすべての列の幅の合計に達したときに、それ以上縮小せず、代わりにスクロール バーを表示するというものです。また、位置: 相対的。宣言は、ウィンドウだけでなく、3 番目の列を html コンテンツの右側に揃えるためにあります。

于 2013-01-27T23:08:55.057 に答える