css多栏布局实例 |html5 css3三棱锥

.container {
width: 100%;
overflow: hidden;
}
.col {
float: left;
width: 33.33%;
box-sizing: border-box;
padding: 10px;
border: 1px solid #ccc;
}
.col:first-child {
margin-left: 0;
}
.col:last-child {
margin-right: 0;
}

上述代码包含两个部分，第一部分是.container类，定义了容器的宽度和溢出隐藏属性。第二部分是.col类，定义了每个栏目的浮动属性和宽度，以及内边距和边框样式。为了避免盒模型的影响，使用了box-sizing属性，将内边距和边框纳入元素的宽度范围内。

此外，由于使用了浮动属性，需要注意对第一个栏目和最后一个栏目的处理。这里使用:first-child和:last-child选择器分别对第一个栏目和最后一个栏目加上左右两侧的边距，来保证栏目之间的距离一致。

假如大家需要实现一个三栏布局的网页，可以像下面这样使用上述代码：

<div class="container">
<div class="col">
<p>这是左侧栏目的内容</p>
</div>
<div class="col">
<p>这是中间栏目的内容</p>
</div>
<div class="col">
<p>这是右侧栏目的内容</p>
</div>
</div>

以上就是一个基于float属性的CSS多栏布局实例，通过定义容器和栏目两个类，可以简单实现多栏布局效果。可以根据实际需求调整栏目宽度、边距和边框样式，以满足设计要求。