css三块浮动布局实例 |css 兼容安卓和苹果

<div class="container">
<div class="left">这是左边内容</div>
<div class="center">这是中间内容</div>
<div class="right">这是右边内容</div>
</div>
<style>
.container {
width: 100%;
overflow: hidden;
}
.left {
width: 20%;
float: left;
}
.center {
width: 60%;
float: left;
}
.right {
width: 20%;
float: left;
}
</style>

这个实例中，大家创建了一个小容器，内部用三个div块组成。通过设置宽度、浮动以及容器的overflow属性，让这三个div块在同一行并且不会出现因容器宽度不够而换行的情况。

<div class="container">
<div class="left">这是左边内容</div>
<div class="center">这是中间内容</div>
<div class="right">这是右边内容</div>
</div>
<style>
.container {
width: 100%;
overflow: hidden;
display: table;
}
.left, .center, .right {
display: table-cell;
vertical-align: top;
}
.left {
width: 20%;
}
.center {
width: 60%;
}
.right {
width: 20%;
}
</style>

这个实例也是用三个div元素实现的，但是大家使用的是CSS中的表格布局方法。将容器的display属性设置为table，同时将每个div块的display属性设置为table-cell，就可以实现宽度均分，在一行显示的效果。如果你习惯了表格布局的方式，可以选择尝试这种方法。

<div class="container">
<div class="left">这是左边内容</div>
<div class="right">这是右边内容</div>
<div class="center">这是中间内容</div>
</div>
<style>
.container {
width: 100%;
}
.left {
width: 20%;
float: left;
}
.right {
width: 20%;
float: right;
}
.center {
margin-left: 20%;
margin-right: 20%;
}
</style>

最后一个实例使用了一个与前面两个不同的方式，左右两个div块都浮动，中间的div块则使用margin设定左右间距。其中的关键在于左右两侧的div块需要分别设置浮动为left和right才可以达到效果。

以上三种方式都是比较实用的布局方法，可以根据实际需求选择适合的。