您的位置:CSS5 > CSS笔记 >

div并排显示布局方法

发布日期:2020-02-14 21:10:43 来源:WWW.CSS5.COM.CN

什么css样式可以让div并排显示?

本身div默认有块样式,默认独占一行,所以什么样式都不设置,只设置再小宽度,div不会并排排版。

浮动样式float来实现并排。

实现方法:

最简单样式就是float浮动样式。

对div设置float即可实现div并排,比如float:left。

需要注意要想div并排,无论多少个div都可以并排排版。有个条件,只要div并排的宽度之和小于或等于父级宽度,你们都会并排显示。

div并排布局显示实例:

1、css代码

.bp{ float:left; width:100px; border:1px solid #F00;}

2、html代码

<div class="bp">
div并排
</div>
<div class="bp">
div并排
</div>
<div class="bp">
div并排
</div>

3、截图

div并排
div实现并排

说明:无论多少个div设置float后,即可实现div并排,但是如果这些排一排的div宽度之和大于了父级宽度,后面排不下的div就会自动换行。

标签(Tag): div 并排
本文分享URL地址:https://www.css5.com.cn/biji/1619.shtml

作者:CSS5

上一页:上一篇:div width的用法
下一页:下一篇:段落p标签换行间距太大如何变小一点