Floating Tableless Layout

Question

任何人都可以告訴我如何執行此浮動和清除佈局？我一直想2天徹底失敗

Answer 1

應該很簡單，這是一個基本的2列布局一個頭。

像這樣的東西應該很好地工作：

<div id="container"> 
<div id="header">1</div> 
<div id="column1"> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
</div> 
<div id="column2"> 
    <div>5</div> 
    <div>6</div> 
</div> 
</div> 

和一些基本的CSS

#column1, #column2{ 
width:45%; 
float:left; 
} 

我已經在這裏放一個簡單的例子：http://jsfiddle.net/9DfRg/

Answer 2

當然也有許多解決方案。其中一個可能是以下幾點：

HTML

<div id="wrapper"> 
    <div id="one">One</div> 
    <div id="two">Two</div> 
    <div id="three">Three</div> 
    <div id="four">Four</div> 
    <div id="five">Five</div> 
    <div id="six">Six</div> 
</div> 

CSS

#wrapper { 
    width:960px; 
} 
#one { 
    width:100%; 
    height:100px; 
    background:#0C9; 
} 
#two, #three, #four, #five, #six { 
    width:480px; 
} 
#two, #four, #six { 
    float:left; 
    height:100px; 
} 
#three, #five { 
    float:right; 
} 
#three { 
    height:200px; 
} 
#five { 
    height:150px; 
} 
#two { 
    background:#06F; 
} 
#three { 
    background:#093; 
} 
#four { 
    background:#699; 
} 
#five { 
    background:#F06; 
} 
#six { 
    background:#666; 
} 

活生生的例子：http://jsbin.com/iquyu5