固定宽度左列,可变宽度右列

Question

这是网站的简化布局:

#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像素宽,并转到屏幕底部.右列应该占据宽度的其余部分,并且将包含一堆浮动图像(有点像Google图像搜索的样子).我怎么能用CSS和HTML做到这一点？我宁愿不使用JavaScript.

Answer 1

只需在右列的左边缘添加200px的边距,然后浮动左列.

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

#right_column {
  margin-left: 200px;
}

100%的高度不会像你认为的那样工作.