CSS中的布局是网页设计中非常关键的一部分，好的布局可以让网页看起来更加整洁美观。下面我们来看一个基于CSS的两列布局的案例。

HTML代码：<div ><div ><h2>左侧区域</h2><p>这是左侧区域的文本内容</p></div><div ><h2>右侧区域</h2><p>这是右侧区域的文本内容</p></div></div>CSS代码：.main{width: 800px;margin: 0 auto;}.left{width: 220px;float: left;}.right{width: 580px;float: right;}

上面的HTML代码中，包含一个class为main的div元素，该元素包含了两个class分别为left和right的div元素，这样就实现了两列布局。

接下来，我们来看看CSS的代码。首先，我们设置了class为main的元素的宽度为800px，并通过margin: 0 auto让它在水平方向上居中。接着，我们设置了class为left的元素宽度为220px，并让它向左浮动。同理，我们设置了class为right的元素宽度为580px，并让它向右浮动。这样就实现了两个元素的左右布局。

以上就是基于CSS的两列布局的案例，该案例简单易懂总结了两列布局的HTML和CSS代码，希望对初学者有所帮助。