Question

我有一个两列布局，其中我有一个350px右列的静态宽度，而左列的宽度应该是它填充页面的其余部分。或者至少这就是我想要发生的事情，但不幸的是，事实并非如此。

以下是我的css / html：http://jsfiddle.net/CmJ7P/。任何有关如何实现这一目标的帮助都将不胜感激。

编辑：如果你能

，我更喜欢IE6中的解决方案

Answer 1

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

Answer 2

我知道有人会反对这一点，但我认为实现这一目标的最佳方法是使用框架。类似的东西：

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

这将创建左右两个帧。左边将占据整个页面减去350px。

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

半流体布局CSS / Html

2 个答案: