原码笔记

原码笔记

CSS实现多行多列的布局的实例代码

小诸哥 0

这篇文章主要介绍了CSS实现多行多列的布局的实例代码,需要的朋友可以参考下

1.两列多行：

 

HTML:

  1. <div class="box1">
  2.      box1:实现两列多行布局
  3.      <ul>
  4.          <li>111</li>
  5.          <li>222</li>
  6.          <li>333</li>
  7.      </ul>
  8. </div>

CSS:

  1. .box1 {
  2.      width: 500px;
  3.      background: #EEEEEE;
  4. }
  5. .box1 ul {
  6.      clear: both;
  7.      overflow: hidden;
  8. }
  9. .box1 ul li {
  10.      width: 48%;
  11.      height: 100px;
  12.      margin-bottom: 10px;
  13.      background: skyblue;
  14.      float: left;
  15. }
  16. .box1 ul li:nth-child(even) {
  17.      margin-left: 4%;
  18. }

这用到了nth-child（），兼容ie9及以上的浏览器，中间的空隙就是两个并排div宽度之和，100%减去后剩下的宽度；

既然提到了nth-child（）,那么就要说一下nth-of-type（），也是只兼容ie9及以上的浏览器。它与nth-child的区别是：

  1. <div class="box">
  2.      <h1></h1>
  3.      <h1></h1>
  4.      <p></p>
  5.      <p></p>
  6.      <p></p>
  7. </div>

如果要让第二个p标签背景为红色，那么，p:nth-child(4)这个能实现效果；而p:nth-of-type(2)，就能实现。所以nth-of-type不管p标签前面有多少内容，都只认p的第二个元素。而nth-child却是找它父级的第几个元素。在这种情况下nth-of-type的优点就体现出来了。

2.多行多列

 

HTML：

  1. <div class="box2">
  2.      box2:多行多列
  3.      <ul>
  4.          <li>
  5.              <div class="com">
  6.                  111
  7.              </div>
  8.          </li>
  9.          <li>
  10.              <div class="com">
  11.                  222
  12.              </div>
  13.          </li>
  14.          <li>
  15.              <div class="com">
  16.                  333
  17.              </div>
  18.          </li>
  19.          <li>
  20.              <div class="com">
  21.                  444
  22.              </div>
  23.          </li>
  24.      </ul>
  25. </div>

css:

  1. .box2 {
  2.      background: #EEEEEE;
  3.      margin-top: 20px;
  4.      width: 500px;
  5. }
  6. .box2 ul {
  7.      overflow: hidden;
  8.      margin-left: -10px;
  9.      background: #EEEEEE;
  10. }
  11. .box2 ul li {
  12.      width: 33.3333%;
  13.      height: 50px;
  14.      float: left;
  15.      padding-left: 10px;
  16.      box-sizing: border-box;
  17.      margin-bottom: 10px;
  18. }
  19. .box2 ul li .com {
  20.      height: inherit;
  21.      background: skyblue;
  22. }

这里实现的原理是：子级使用padding-left（元素间的间隙）和box-sizing:border-box，父级使用margin-left负值，这个值和子级padding-left是一样的。li里面加div只是为了让效果明显，不然给li加上背景，由于box-sizing：border-box的存在，li看起来就是没效果全部连在一起的。

如果要实现2列，4列，5列等多列，只需修改li的宽度（平均分配）就行了。

这种做法兼容ie8及以上的浏览器，在ie7下，每个li的宽度大概比正常的少2%左右，比如3列，正常显示的话，每个li宽度是33.333%，但是ie7下需设置31.333%，才能基本正常显示。。。这具体的原因没深究，后面有时间再来补这个坑 ×××

3.圣杯布局：

 

HTML:

  1. <div class="box3">
  2.      <div class="header">圣杯布局(使用浮动)顶部</div>
  3.      <div class="container">
  4.          <div class="center">
  5.              中间自适应宽度,注意这个center是在left的div前面
  6.          </div>
  7.          <div class="left">
  8.              左部固定宽度
  9.          </div>
  10.          <div class="right">
  11.              右部固定宽度
  12.          </div>
  13.      </div>
  14.      <div class="footer">圣杯布局底部</div>
  15. </div>

CSS：

  1. .box3 {
  2.      background: #EEEEEE;
  3.      color: white;
  4.      margin-top: 20px;
  5. }
  6. .box3 .header {
  7.      width: 100%;
  8.      background: #008000;
  9.      height: 50px;
  10. }
  11. .box3 .container {
  12.      clear: both;
  13.      overflow: hidden;
  14.      padding: 0 130px 0 100px;
  15. }
  16. .box3 .container .left {
  17.      width: 100px;
  18.      float: left;
  19.      background: #008B8B;
  20.      height: 100px;
  21.      margin-left: -100%;
  22.      position: relative;
  23.      left: -100px;
  24. }
  25. .box3 .container .center {
  26.      background: #00BFFF;
  27.      height: 100px;
  28.      float: left;
  29.      width: 100%;
  30. }
  31. .box3 .container .right {
  32.      width: 130px;
  33.      float: left;
  34.      background: #FA8072;
  35.      height: 100px;
  36.      margin-left: -130px;
  37.      position: relative;
  38.      right: -130px;
  39. }
  40. .box3 .footer {
  41.      width: 100%;
  42.      background: #222222;
  43.      height: 30px;
  44. }

圣杯布局最主要的是中间那并列的3个div，上下两个div，我只是拿来充数的。。。

实现过程大致如下：1.这三个div的HTML摆放的先后顺序是有讲究的，center这个显示在中间的div，在html里是排在最前面的，然后是left，最后是right。

2.在container没有设置padding，left这个div和right这个div都没设置margin与相对定位relative之前，三个div都float：left。这时候页面上显示的是center独占一行，然后是left这个div，然后是right这个div

3.然后left这个div设置margin-left：-100%。这样left就能从第二排蹦到第一排最左边并覆盖center这个div。

4.right这个div设置margin-left: -130px;这个值是它自己宽度的大小。然后right这个div也蹦到第一排最右边并覆盖center这个div。

5.这个时候container设置padding，这个padding的大小是left与right这两个div分别的宽度，然后left与right这两个div分别再设置相对定位，移动自己宽度的距离，就正常显示了。

这种布局方式ie7都兼容，ie6没有测试过。。。

4.仿圣杯布局

 

HTML：

  1. <div class="box4">
  2.      <div class="header">圣杯布局2(使用定位)顶部</div>
  3.      <div class="container">
  4.          <div class="left">
  5.              左部固定宽度
  6.          </div>
  7.          <div class="center">
  8.              中间自适应宽度，无需考虑顺序
  9.          </div>
  10.          <div class="right">
  11.              右部固定宽度
  12.          </div>
  13.      </div>
  14.      <div class="footer">圣杯布局2底部</div>
  15. </div>

CSS:

  1. .box4 {
  2.      background: #EEEEEE;
  3.      color: white;
  4.      margin-top: 20px;
  5. }
  6. .box4 .header {
  7.      width: 100%;
  8.      background: #008000;
  9.      height: 50px;
  10. }
  11. .box4 .container {
  12.      clear: both;
  13.      overflow: hidden;
  14.      padding: 0 130px 0 100px;
  15.      position: relative;
  16. }
  17. .box4 .container .left {
  18.      width: 100px;
  19.      background: #008B8B;
  20.      height: 100px;
  21.      position: absolute;
  22.      top: 0px;
  23.      left: 0px;
  24. }
  25. .box4 .container .center {
  26.      background: #00BFFF;
  27.      height: 100px;
  28.      width: 100%;
  29. }
  30. .box4 .container .right {
  31.      width: 130px;
  32.      background: #FA8072;
  33.      height: 100px;
  34.      position: absolute;
  35.      top: 0px;
  36.      right: 0px;
  37. }
  38. .box4 .footer {
  39.      width: 100%;
  40.      background: #222222;
  41.      height: 30px;
  42. }

这种方式实现的思路是：左右两边绝对定位，然后中间的div设置padding，也能达到同样的效果。也不用在意中间的三个div的排版顺序，我一直都在用这种方式。

也兼容ie7，ie6没测试过

5.双飞翼布局

 

HTML：

  1. <div class="box5">
  2.      <div class="header">双飞翼布局顶部</div>
  3.      <div class="container">
  4.          <div class="center">
  5.              <div class="center-in">
  6.                  中间自适应宽度,注意这个center是在left的div前面
  7.              </div>
  8.          </div>
  9.          <div class="left">
  10.              左部固定宽度
  11.          </div>
  12.          <div class="right">
  13.              右部固定宽度
  14.          </div>
  15.      </div>
  16.      <div class="footer">双飞翼布局底部</div>
  17. </div>

CSS:

  1. .box5 {
  2.      background: #EEEEEE;
  3.      color: white;
  4.      margin-top: 20px;
  5. }
  6. .box5 .header {
  7.      width: 100%;
  8.      background: #008000;
  9.      height: 50px;
  10. }
  11. .box5 .container {
  12.      clear: both;
  13.      overflow: hidden;
  14. }
  15. .box5 .container .left {
  16.      width: 100px;
  17.      float: left;
  18.      background: #008B8B;
  19.      height: 100px;
  20.      margin-left: -100%;
  21. }
  22. .box5 .container .center {
  23.      background: #00BFFF;
  24.      height: 100px;
  25.      float: left;
  26.      width: 100%;
  27. }
  28. .box5 .container .center .center-in {
  29.      margin: 0 130px 0 100px;
  30. }
  31. .box5 .container .right {
  32.      width: 130px;
  33.      float: left;
  34.      background: #FA8072;
  35.      height: 100px;
  36.      margin-left: -130px;
  37. }
  38. .box5 .footer {
  39.      width: 100%;
  40.      background: #222222;
  41.      height: 30px;
  42. }

双飞翼布局和圣杯布局看起来都差不多，但是最大的不同就是：双飞翼布局中center中间的这个div里面还有一个div，主要通过这个div的margin值来达到布局的目的。然后left和right这两个div都不用再设置相对定位relative。其它的都基本一样

兼容ie7，ie6未测试过。

还有许多多行多列的布局方式，比如css3的flex，inline-block等等。。只要有思路，再难的布局都能实现。

总结

以上所述是小编给大家介绍的CSS实现多行多列的布局，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

标签： CSS 实现 实例 多行 布局 代码

赏
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！

上一篇CSS 动画实现动态气泡背景的方法

下一篇css3 响应式媒体查询的示例代码

相关文章