如何用2列獲得此佈局？

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

來源

2012-04-24 xRobot

集利潤率爲0都和填充到邊欄爲0

來源

2012-04-24 22:00:55 albert

弱。我是對的。 – albert 2012-04-24 22:42:58

-1

在你的CSS中，你的黑色列中有100％的高度（它沒有一個父項來繼承它的高度），爲了使100％的高度工作在一個定義高度的div內包裝你的列，你可以看到這個小提琴http://jsfiddle.net/3YW2C/，通過限定高度，浮標實際工作

來源

2012-04-24 22:04:18 Paradise

嘿，我想你應該使用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-25 09:49:29

如何用2列獲得此佈局？

回答

相關問題