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 中，您可以在此看到小提琴http://jsfiddle.net/3YW2C/通过定义高度，浮动实际上正在工作

于 2012-04-24T22:04:18.280 回答