2

2列のレイアウトがあり、右の列の幅は350ピクセルで、左の列の幅はページの残りの部分を占めるようにする必要があります。または、少なくともそれは私がやりたいことですが、残念ながらそうではありません。

これが私のcss/htmlの外観です：http：//jsfiddle.net/CmJ7P/。これを実現する方法についてあなたが提供できるどんな助けも大いにありがたいです。

編集：可能であれば、IE6のソリューションをお勧めします

4

2 に答える 2

5

左側の列からfloatを削除し、右側のfloat列をHTMLの最初に配置する必要があります。

.wrapper {
  display: block;
}

.wrapper div.content {
  background-color: #ccc;
}

.wrapper div.sidebar {
  display: block;
  background-color: blue;
  float: right;
  width: 320px;
  height: 400px;
  padding: 0 20px;
}

html, body {
  padding: 0;
  margin: 0;
}
<div class="wrapper">
  <div class="sidebar" style="width: 350px">
    <div style="margin-top: 15px;">
    </div>
    <div class="sidebarpanel">
    </div>
    <div class="sidebarpanel">
    </div>
    <div class="sidebarpanel">
    </div>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed elementum libero. Morbi aliquam, nunc a ullamcorper eleifend, dui ante cursus odio, ac lacinia arcu neque vitae dui. In et ipsum orci. Donec laoreet imperdiet augue non sodales.
      Phasellus vel elit sit amet est mattis euismod. Duis non turpis eget ligula gravida mattis eget vitae turpis. Nunc vulputate lacinia posuere. Quisque nec feugiat quam. Praesent facilisis pulvinar tortor, sit amet fringilla nisl imperdiet at. In
      pulvinar dignissim dignissim.
    </p>
  </div>
</div>

于 2011-04-07T20:29:23.690 に答える
-2

これに反対する人もいると思いますが、これを実現する最善の方法はフレームを使用することだと思います。何かのようなもの：

<frameset cols="*,350px">
  <frame src="a.html" />
  <frame src="b.html" />
</frameset>

これにより、左右の2つのフレームが作成されます。左側はページ全体から350pxを引いたものになります。

または、javascriptを使用してドキュメント全体の幅を取得し、合計から350を減算し、ウィンドウのサイズ変更イベントをバインドして、「fluid」要素（ページの残りの部分を占める要素）の幅を更新することもできます。jQueryはこれを非常に簡単にします。ただし、ブラウザの互換性についてはよくわかりません。

于 2011-04-07T20:28:01.060 に答える