首页 > 代码库 > 关于左右浮动元素的同行问题
关于左右浮动元素的同行问题
在实现散列布局的时候,遇到一个问题,想用自适应布局,即左右两列分别为左右浮动,中间列自适应html代码如下
<div id="wrap">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
对应CSS代码为:
#wrap{
width: 80%;
border: 1px solid #dda;
height: 98px;
margin: 0 auto;
}
#left{
width: 20%;
margin-left: 10%;
float: left;
height: 100px;
background-color: #ada;
}
#center{
margin: 0 auto;
width: 80%;
height: 100px;
background-color: #eca;
}
#right{
width: 20%;
margin-right: 10%;
height: 100px;
float: right;
background-color: #ada;
}
结果预想的右浮动列并没有像原来那样浮动在中间列之上,后来看解决办法是,如想实现,左右浮动在同行显示,html代码中右浮动元素要先于左浮动元素显示,即
<div id="wrap">
<div id="right"></div>
<div id="left"></div>
<div id="center"></div>
</div>
关于左右浮动元素的同行问题