2

我有一个两列布局，其中右列的静态宽度为 350 像素，左列的宽度应该填满页面的其余部分。或者至少那是我想要发生的事情，但不幸的是它不是。

下面看看我的 css/html：http: //jsfiddle.net/CmJ7P/。您可以就如何实现这一目标提供任何帮助，我们将不胜感激。

编辑：如果可以的话，我更喜欢 IE6 中的解决方案

4

2 回答 2

5

您需要从左列中删除浮动并将右浮动列放在 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>

这将创建两个框架，左侧和右侧。左边将占据整个页面减去 350 像素。

或者，您可以使用 javascript 获取整个文档的宽度，从总数中减去 350 并绑定一个窗口调整大小事件来更新您的“流体”元素（占据页面其余部分的元素）的宽度。jQuery 将使这非常容易。不过，我不太确定浏览器的兼容性。

于 2011-04-07T20:28:01.060 回答