html - 左列固定宽度，右列可变宽度

这是网站的简化布局:

#left_column {
  width: 200px;
  height: 100%;
}

<div id="left_column">
</div>

<div id="right_column">
  /* A bunch of 100px width photos that are being floated */
</div>

所以正如代码所暗示的那样，我有一个左列和一个右列。左列应为 200 像素宽并位于屏幕底部。右列应该占据其余的宽度，并将包含一堆 float 图像(有点像谷歌图像搜索的样子)。我怎样才能用 CSS 和 HTML 做到这一点？我宁愿不使用 JavaScript。

最佳答案

只需在右列的左边缘添加 200 像素的边距，并 float 左列。

#left_column {
  width: 200px;
  float: left;
}

#right_column {
  margin-left: 200px;
}

100% 的高度不会像您认为的那样工作。

关于html - 左列固定宽度，右列可变宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12274199/