CSS布局模型(二)——浮动模型

时间:2022-11-11 10:57:20



        块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的,但可以用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>

效果图

CSS布局模型(二)——浮动模型


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

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

CSS布局模型(二)——浮动模型


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


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

CSS布局模型(二)——浮动模型



声明:CSS布局模型系列博文转载自慕课网学习计划,仅供学习、复习使用,不会用于任何商业用途,特此声明,详细请访问慕课网