您的位置:首页 > CSS技巧 >

 

div 换行显示

 

div换行显示实现-DIV 换行

默认情况下div具有独占一行,默认div换行显示的。如果多个div使用float后多个div宽度总宽度小于等于父级宽度时,这几个div将会并列显示,将不会换行显示。

要让DIV换行显示方法条件:
1、div不加float,默认div独占一行,换行显示的。
2、div加float后,要让div换行显示多行显示,只需要css display:block即可让div换行显示
3、div加float后,要让DIV换行显示,只需要同排DIV总宽度大于父级宽度DIV自然会换行显示。比如父级宽度500px,子级两个div使用float后只要两个div总宽度大于500px,这样DIV就会自动换行显示。

div 换行显示实例代码:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>div换行显示实例 ThinkCSS</title> 
  6. <style> 
  7. .exp{ width:380px} 
  8. .expa{ float:left; width:300px} 
  9. .expb{ float:left; width:81px} 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div>未设置任何样式,独占一行</div> 
  14. <div class="exp"> 
  15. <div class="expa">我宽度300px</div> 
  16. <div class="expb">我宽度81px</div> 
  17. </div> 
  18. </body> 
  19. </html> 

div 独占一行 换行显示效果截图

独占一行 div换行显示实例效果截图
独占一行 div换行显示实例效果截图

当然如果子级使用float总宽度小于父级是不换行的,子级div会并排并列显示,要让子级DIV换行排版就需要对子级设置display:block即可实现div的提行换行显示排版。

div换行相关扩展阅读:
div并排显示
div不换行显示

标签(Tag): 换行
本文分享URL地址:http://www.css5.com.cn/jiqiao/1010.html

更多

上一页: 上一篇:div大小 div固定大小设置
下一页: 下一篇:css文字竖排显示 文字垂直布局

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期::2016-08-09     点击:
原创:CSS5     来源网址:http://www.css5.com.cn/jiqiao/1010.html
本文www.css5.com.cn(DIV CSS) CSS5版权所有,欢迎转载,并注明出处来源及URL!