您的位置:首页 > 其它

在同一行布局的技巧

2016-04-26 00:00 330 查看
摘要: 我们经常需要在不同的div交错放置元素,并居中,这时可以利用浮动元素外面的div高度为0,使多个div在一条线上



例如上面的布局,我们可以使用里面元素浮动,外面的div高度为0的特点来布局,使2个div重叠在一起

<div class="pretext1-nexttext1">
<span class="pretext1" >无</span>
<span class="nexttext1" >站点名称2</span>
</div>
<div class="banner_jiantou">
<span class="pre" style="z-index:100;"><img src="../../dist/img/left-jiantou.png" width="29"  /></span>
<span class="next" style="z-index:100;"><img src="../../dist/img/right-jiantou.png" width="29" /></span>
</div>

.banner_jiantou{width:450px;margin:0 auto;margin-top:2px;}
.pre{float:left;}
.next{float:right;}
.pretext1-nexttext1{ width:900px; margin:0 auto;font-size:20px;}
.pretext1{width:30%;float:left;text-align:right;padding-right:30px;}
.nexttext1{width:30%;float:right;text-align:left;padding-left:30px;}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: