浮动无表格布局

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