4

サイトの単純化されたレイアウトを次に示します。

#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 は使用しないほうがよいでしょう。

4

5 に答える 5

6

右の列の左端に 200px のマージンを追加し、左の列をフロートするだけです。

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

#right_column {
  margin-left: 200px;
}

100% の高さは、あなたが思っているようには機能しません。

于 2012-09-05T03:49:37.563 に答える
1

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

デモ

于 2012-09-05T03:57:32.290 に答える
0

高さにはピクセル値が必要だと思います。パーセンテージ値では高さが増加しないようです。

<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>
于 2012-09-05T04:14:56.340 に答える
0

このフィドルを試してください -

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;
}
于 2012-09-05T04:00:25.803 に答える