與CSS浮動的div

多行，我想使用浮動CSS的div來實現這樣的設計：與CSS浮動的div

 
--------------- 
|Header  | 
--------------- 
|Col1| Row1 | 
| |--------| 
| | Row2 | 
--------------- 
| Footer  | 
---------------

我搜索周圍，但沒有發現任何簡單的方法來做到這一點。

我怎麼能做到這一點？

謝謝。

編輯：我想澄清我的問題。我想在左邊的菜單欄旁邊有兩排圖像。我正在嘗試使用float：left來進行圖像佈局。

EDIT2：解決了使用display：inline-block代替float：left的圖像元素的問題。

來源

2011-07-21 brisky

爲什麼不使用表？ – Joel

那麼這是頁面的主要佈局，我不想使用表格。 – brisky

@Joel：表格不適用於非表格數據。對於所有我們知道他的左欄將形成他的主頁內容區域，他的右欄可能會重複引號等。 –

我將開始與具有頁面寬度的容器。對於這個例子，我們會說width:950px.所有奇怪的寬度是由於邊框造成的，所以如果你刪除它們，所有的寬度將會是更多的常規數字，比如400,950,350等。這裏是一個實例： http://jsfiddle.net/edgBP/embedded/result/

<html> 
<head> 
<style type="text/css"> 
#maincontent { 
    width:950px; 
    height:100%; 
    margin:0 auto; 
} 
#header { 
    width:946px; 
    height:150px; 
    border:#000 solid; 
    border-width:2px 2px 1px 2px; 
} 
#leftcolumn { 
    width:395px; 
    height:703px; 
    border:#000 solid; 
    border-width:1px 1px 1px 2px; 
    float:left; 
} 
#toprow { 
    width:549px; 
    height:351px; 
    border:#000 solid; 
    border-width:1px 2px 1px 1px; 
    float:left; 
} 
#bottomrow { 
    width:549px; 
    height:350px; 
    border:#000 solid; 
    border-width:1px 2px 1px 1px; 
    float:left; 
} 
#footer { 
    width:946px; 
    height:150px; 
    border:#000 solid; 
    border-width:1px 2px 2px 2px; 
    clear:both; 
} 
</style> 
<body> 
<div id="maincontent"> 
    <div id="header">Header Content</div> 
    <div id="leftcolumn">Leftcolumn Content</div> 
    <div id="toprow">Toprow Content</div> 
    <div id="bottomrow">Bottomrow Content</div> 
    <div id="footer">Footer Content</div> 
</div> 
</body> 
</html>

來源

2011-07-21 18:47:38

最簡單的事情，你很可能會使用一個框架：

來源

2011-07-21 15:46:21 Joshua

我已經加上了你，但我認爲它仍然很重要，他在進入框架之前瞭解基本的CSS。 –

哦，我完全同意，但這不是你能通過這裏完成的事情，你知道嗎？那裏有很多免費的CSS學習資源。 – Joshua

這裏有一個如何實現一個簡單的例子假設你的主寬度是400px。

HTML：

<div class='container'> 

<div class='leftCol'> 
.. your left col content .. 
</div> 

<div class='rightCol'> 
<div>.. row 1 content ..</div> 
<div>.. row 2 content ..</div> 
</div> 

</div>

CSS：

.container {width:400px;float:left;} 
.leftCol {width:200px; float:left;} 
.rightCol {width:200px; float:right} 
.rightCol div {float:left; clear:left;}

來源

2011-07-21 15:50:12

與CSS浮動的div

回答

相關問題