码迷,mamicode.com
首页 > 其他好文 > 详细

浮动模型

时间:2016-06-03 21:27:55      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:

块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。

任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

效果图

技术分享

当然你也可以同时设置两个元素右浮动也可以实现一行显示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

效果图

技术分享

又有小伙伴问了,设置两个元素一左一右可以实现一行显示吗?当然可以:

div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

效果图

技术分享

 

浮动模型

标签:

原文地址:http://www.cnblogs.com/Rinpe/p/5557447.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!