css - 创建 CSS 列

Question

可能重复：
创建两列布局 - html/css 语义

我有一个跨越整个浏览器的 div 和另一个居中的 div，使用下面的代码：

.wrapper {width: 1024px; margin: 0 auto; clear: both;}

如何在包装器中创建两列？

Answer 1

使用浮点数（并清除它们）或使用display:inline-blocks.

在这里，我给你做了一个丰富多彩的例子。

html

<div class="wrapper">
    <div id="col1">a</div>
    <div id="col2">b</div>    
    <br style="clear:both" />
</div>

<hr />

<div class="wrapper">
    <div class="col">a</div>
    <div class="col">b</div>   
</div>

css

body {background:blue;}
.wrapper {width: 80%; margin:0px auto; background:red;height:300px;}

#col1 {width:50%;float:left;background:green; height:200px;}
#col2 {width:50%;float:right;height:200px;background:lightblue;}

.col {display:inline-block; width:49%;height:200px;background:pink;}