0

私はこのようなことをする必要があります：

http://i.imgur.com/iT1wH.jpg

最初の黒い列は常にページの左側に表示されます。

私はこのコードを書きましたが、機能しません：

HTML：

<html>
<head>
    <link rel="stylesheet" href="home.css" type="text/css" media="all" />
</head>


<body>
<div id="allcontent">


<div id="sidebar"> </div>

<div id="center">

<p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p> <p> TEST </p>

</div>


</div>
</body>
</html>

CSS：

#allcontent{ width:1000px; margin:auto; }

#center{ 
border-right:solid 1px #d0d9e8; height:80%; width:760px;
padding: 35px 10px 10px 0px;
float:right;
}

#sidebar { 
width:200px; height: 100%; float:left;  
background:#000;
border:solid 1px black;
}
4

3 に答える 3

1

両方のマージンを0に設定し、サイドバーのパディングを0に設定します

于 2012-04-24T22:00:55.003 に答える
0

ねえ、私はあなたがdisplay table properties このように使用されるべきだと思います

Css

  #allcontent{ width:1000px; margin:auto;
display:table;}

#center{ 
border-right:solid 1px #d0d9e8;  width:760px;
padding: 35px 10px 10px 30px;
display:table-cell;
}

#sidebar { 
width:200px;
    display:table-cell;  
background:#000;
border:solid 1px black;
}​

ライブデモhttp://jsfiddle.net/99Ych/

于 2012-04-25T09:49:29.813 に答える
-1

あなたのcssではあなたはあなたの黒い列に100％の高さを持っています（それはその高さを継承する親を持っていません）、100％の高さの仕事をさせるためにあなたは定義された高さのdivの中にあなたの列を包みます、あなたはこれで見ることができますfiddle http://jsfiddle.net/3YW2C/高さを定義することにより、フロートが実際に機能している

于 2012-04-24T22:04:18.280 に答える