首页 > 其他 > 详细

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

时间:2014-10-24 15:57:43      阅读:209      评论:0      收藏:0      [点我收藏+]

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

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!