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>

#左#u列{
宽度：200px；
身高：100%；
}
/*正在浮动的一组100px宽的照片*/

---

正如代码所暗示的，我有一个左栏和一个右栏。左列应为200像素宽，并位于屏幕底部。右边的一栏应该占据剩下的宽度，并将包含一组浮动图像（有点像谷歌图像搜索的样子）。如何使用CSS和HTML实现这一点？我不想使用JavaScript。

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

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

#right_column {
  margin-left: 200px;
}

100%的高度不会按照您认为的方式工作。

HTML:

<div id="leftcol">Demo text</div>
<div id="rightcol">More demo text</div>

试试这把小提琴-

HTML

---

我认为高度需要有一个像素值-百分比值似乎不会增加高度

<style type="text/css">
#left_column {
    width: 20%;
    float:left;
    background-color:blue;
}
#right_column {
    width:80%;
    float:right;
    background-color:green;
}
div {
    height:1000px;
}
</style>

<div id="left_column">&nbsp;</div>
<div id="right_column">&nbsp;</div>

#左列{
宽度：20%；
浮动：左；
背景颜色：蓝色；
}
#右下栏{
宽度：80%；
浮动：对；
背景颜色：绿色；
}
div{
高度：1000px；
}

这些解决方案对我不太管用。根据我读到的内容，我得出了如下结论：

#right_column {
    margin-left: 200px;
    float: left;
}

#left_column {
    float: left; 
    width: 200px;
    margin-left: -100%;
}

---

不完全正确。你的左边距应该是200px，而不是20%。在我找到Ariel的解决方案之前，我尝试过将左列的宽度设置为固定值，并为右列设置一个百分比值，但效果不太好。在某种程度上，当浏览器窗口的宽度减小时，右栏中的文本会在该栏中换行，但在该点之后（取决于右栏使用的百分比），文本会在下一行的页面左侧换行。如果为右列设置左边距，则边距始终保持在该列内。FF，即Chrome中的相同行为。我只想补充一点，这个解决方案对我来说适用于多个固定列和一个可变右列：将除最右边的列之外的所有列向左浮动，然后将最右边的列的margin left属性设置为其他列的宽度之和（加上一个边距）。小提琴似乎过时了。现在那里有完全不同的东西。

html, body, #wrapper, #left_column, #right_column { height: 100%; min-height: 100%; }


#left_column {
  width: 200px;
  float: left;
    border:1px solid green;
    height: 100%;
    min-height: 100%;
}

#right_column {
  margin-left: 200px; border:1px solid red;
}

<style type="text/css">
#left_column {
    width: 20%;
    float:left;
    background-color:blue;
}
#right_column {
    width:80%;
    float:right;
    background-color:green;
}
div {
    height:1000px;
}
</style>

<div id="left_column">&nbsp;</div>
<div id="right_column">&nbsp;</div>

#right_column {
    margin-left: 200px;
    float: left;
}

#left_column {
    float: left; 
    width: 200px;
    margin-left: -100%;
}