第1列">第2列">第3列_div一行多列">
当前位置:   article > 正文

CSS div布局 一行多列_div一行多列

div一行多列

CSS div布局 一行多列 | 小步教程

CSS div布局 一行多列

div布局实现一行多列的关键属性:float属性设置浮动;

同时需要clear属性清除浮动。

1 float属性简介

float属性设置浮动。

float属性值说明
none默认值。不浮动。
left左浮动。当前元素没有了换行效果。
right右浮动。当前元素没有了换行效果。

例1:一行三列。

  1. <body>
  2. <!-- float属性 -->
  3. <div style="float: left;width: 100px;">1</div>
  4. <div style="float: left;width: 100px;">2</div>
  5. <div style="float: left;width: 100px;">3</div>
  6. </body>

运行效果

img

2 浮动塌陷

2.1 多行

在例1,我们实现了浮动效果。

现在实现:3行,第1行分多列。

每一行,需要外层一个div,然后这个div嵌套多个float的div表示列。

例2:共3行,第1行分3列。

  1. <div><!-- 这对div表示第1行-->
  2. <div style="float: left;width: 100px;">11</div>
  3. <div style="float: left;width: 100px;">12</div>
  4. <div style="float: left;width: 100px;">13</div>
  5. </div><!-- 第1行结束-->
  6. <div><!-- 这对div表示第2行-->
  7. 2
  8. </div><!-- 第2行结束-->
  9. <div>
  10. 3
  11. </div>

img

出问题了:第2行没有换行,第3行正常换行。为什么?

2.2 浮动塌陷

F12查看第1行的div,其高度为0。这就是浮动塌陷。

img

2.3 浮动塌陷的原因

当div设置float属性为left或right时,导致外层的div的高度失效,即为0。

下节介绍如何解决浮动塌陷的方法。

3 CSS div布局 解决浮动塌陷

方法1:设置高度

既然外层div高度为0,我们手动给外层div加上高度即可。

  1. <body>
  2. <div style="height: 40px;">
  3. <div style="float: left;width: 100px;">11</div>
  4. <div style="float: left;width: 100px;">12</div>
  5. <div style="float: left;width: 100px;">13</div>
  6. </div>
  7. <div>
  8. 2
  9. </div>
  10. <div>
  11. 3
  12. </div>
  13. </body>

img

适用场景:行的高度固定。

方法2:clear清除浮动

设置clear:both来清除浮动。

通常在内层最后一个div并列加一个仅设置clear:both样式无内容的div。

注意事项:一定要注意这个专用的清除浮动的div的位置。

  1. <body>
  2. <div>
  3. <div style="float: left;width: 100px;">11</div>
  4. <div style="float: left;width: 100px;">12</div>
  5. <div style="float: left;width: 100px;">13</div>
  6. <!-- 专用的清除浮动的div,仅有样式无内容。在代表行的div的内部,最后一个。 -->
  7. <div style="clear: both;"></div>
  8. </div>
  9. <div>
  10. 2
  11. </div>
  12. <div>
  13. 3
  14. </div>
  15. </body>

img

完成。

适用场景:行的高度不确定,由其中内容确定。

方法3:伪类清除浮动

通过after伪类在元素的内部结束位置添加类似清除的div。

本质同方法2,只是写法上不用写专用清除浮动的div,而是通过伪类after添加这个div。

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>CSS 伪类清除浮动 | 小步教程</title>
  4. <style>
  5. /* 清除浮动的样式 */
  6. .class1::after{
  7. content: '';
  8. display: block;
  9. clear:both;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div class="class1">
  15. <div style="float: left;width: 100px;">11</div>
  16. <div style="float: left;width: 100px;">12</div>
  17. <div style="float: left;width: 100px;">13</div>
  18. <!-- 通过在外层div加after伪类样式,实现下方加div的同等效果 -->
  19. <!-- <div style="clear: both;"></div> -->
  20. </div>
  21. <div>
  22. 2
  23. </div>
  24. <div>
  25. 3
  26. </div>
  27. </body>

img

方法4:公共样式清除浮动

当多个div,每个样式都像上面的方法清除浮动,略麻烦,可以设计公共类clearfix专门清除浮动。

前端行业大家已经约定俗成都用clearfix这个类名。

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>CSS 伪类清除浮动 | 小步教程</title>
  4. <style>
  5. /* 公共样式清除浮动*/
  6. .clearfix::after{
  7. content: '';
  8. display: block;
  9. clear:both;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div class="class1 clearfix">
  15. <div style="float: left;width: 100px;">11</div>
  16. <div style="float: left;width: 100px;">12</div>
  17. <div style="float: left;width: 100px;">13</div>
  18. <!-- 通过在外层div加after伪类样式,实现下方加div的同等效果 -->
  19. <!-- <div style="clear: both;"></div> -->
  20. </div>
  21. <div class="clearfix">
  22. <div style="float: left;width: 100px;">21</div>
  23. <div style="float: left;width: 100px;">22</div>
  24. </div>
  25. <div>
  26. 3
  27. </div>
  28. </body>

上述两个div都使用了clearfix类。

可以把clearfix样式放到公共的css文件,需要的地方引用css,直接使用clearfix即可。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/一键难忘520/article/detail/867549
推荐阅读
相关标签
  

闽ICP备14008679号