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％的高度不会像你认为的那样有效。

Answer 2

HTML：

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

CSS：

#leftcol{
    position:fixed;
    left:0;
    top:0;
    height:100%;
    width:200px;
    background-color:yellow;
}

#rightcol{
    width:100%;
    -moz-box-sizing: border-box; /*The rest of the browsers support this now*/
    box-sizing: border-box;
    margin:0;
    padding:0;
    padding-left:200px;
    min-height:2000px;
    background-color:blue;
}

DEMO

Answer 3

试试这个小提琴 -

http://jsfiddle.net/hKyzT/

HTML

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

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

<强> CSS

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;
}

Answer 4

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

<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>

Answer 5

这些解决方案对我来说并不适用。根据我在http://derpturkey.com/two-columns-with-one-fixed-width-and-one-variable-width/上所读到的内容，我最终得到了类似的内容：

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

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

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

5 个答案: