关于左右浮动元素的同行问题

标签：style   color   ar   sp   div   问题   代码   html   ad   

在实现散列布局的时候，遇到一个问题，想用自适应布局，即左右两列分别为左右浮动，中间列自适应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>

关于左右浮动元素的同行问题

标签：style   color   ar   sp   div   问题   代码   html   ad   

原文地址：http://www.cnblogs.com/Hi-baby/p/4048279.html