[分享]css内容分为两列

在网页布局中，常常需要将页面的内容分为两列。这时候，我们可以利用CSS来实现这个效果。下面就是一个简单的例子。我们首先需要一个HTML结构，包含两个div块： 这是左列内容 这是右列内容 然后，...

在网页布局中，常常需要将页面的内容分为两列。这时候，我们可以利用CSS来实现这个效果。下面就是一个简单的例子。
我们首先需要一个HTML结构，包含两个div块：

<div class="left">
  <p>这是左列内容</p>
</div>
<div class="right">
  <p>这是右列内容</p>
</div> 

然后，我们就可以利用CSS来控制这两个块的样式。接下来是CSS代码：

.left {
  float: left;
  width: 50%;
  background-color: #f2f2f2;
  padding: 20px;
}

.right {
  float: right;
  width: 50%;
  background-color: #e6e6e6;
  padding: 20px;
} 

上述代码中，我们利用了float属性来让左侧块和右侧块分别浮动在页面左侧和右侧，并且指定宽度为50%。另外，我们还给它们加了不同的背景色和外边距。这样，两个块就会呈现出一分为二的效果了。
需要注意的是，当两个块的内容长度不一样时，可能会出现高度不对齐的情况。这时候，我们可以加上clear属性来解决：

.clear { clear: both; } 

然后，在HTML中加一个class名为clear的div块，放在两个块的下方：

<div class="left">
  <p>这是左侧内容</p>
</div>
<div class="right">
  <p>这是右侧内容</p>
</div>
<div class="clear"></div> 

这样，我们就可以轻松实现内容分为两列的效果了。