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

posted on 2014-10-24 14:42  Hi_baby  阅读(324)  评论(0编辑  收藏  举报