CSS如何实现页面两列布局与三列布局的方法示例

网络
走自己的路，让别人说去吗！美好的日子带来快乐，阴暗的日子带来经验，所以别对任何一天怀有遗憾。
1. 使用BFC的原理实现
BFC的规则之一，就是BFC区域，不会与float box重叠，因此我们可以利用这一点来实现3列布局。
html代码如下
XML/HTML Code复制内容到剪贴板
  1. <divclass="left"></div>
  2. <divclass="right"></div>
  3. <divclass="main"></div>
css代码如下
CSS Code复制内容到剪贴板
  1. .left{
  2. float:left;
  3. margin-right:10px;
  4. width:100px;
  5. height:100px;
  6. background-color:orange;
  7. }
  8. .rightright{
  9. float:rightright;
  10. margin-left:10px;
  11. width:100px;
  12. height:100px;
  13. background-color:orange;
  14. }
  15. .main{
  16. height:100px;
  17. background-color:green;
  18. overflow:hidden;
  19. }
2.双飞翼布局
这种布局方案最早由淘宝提出，主要为了主列能够被最先加载。
实现原理：
（1）让主列外面添加一个wrap，主列wrap，以及2子列都左浮动。
（2）设置主列wrap宽度为100%，将子列的margin-left设置为负值，让子列能够排列在左右两侧。
（3）这是主列的margin-left与margin-right比左右两列的宽度大一点，则可以设置出来主列与子列之间的间隙。
html代码如下
XML/HTML Code复制内容到剪贴板
  1. <divclass="wrap">
  2. <divclass="main-content">
  3. <divclass="main"></div>
  4. </div>
  5. <divclass="left"></div>
  6. <divclass="right"></div>
  7. </div>
css代码如下
CSS Code复制内容到剪贴板
  1. .wrap{
  2. width:100%;
  3. }
  4. .wrap::after{
  5. display:block;
  6. content:'';
  7. font-size:0;
  8. height:0;
  9. clear:both;
  10. zoom:1;
  11. }
  12. .main-content{
  13. float:left;
  14. width:100%;
  15. }
  16. .main{
  17. height:100px;
  18. background-color:green;
  19. margin-left:110px;
  20. margin-right:110px;
  21. }
  22. .left{
  23. float:left;
  24. width:100px;
  25. height:100px;
  26. background-color:orange;
  27. margin-left:-100%;
  28. }
  29. .rightright{
  30. float:left;
  31. width:100px;
  32. height:100px;
  33. background-color:orange;
  34. margin-left:-100px;
  35. }
3.圣杯布局
圣杯布局在结构上要简单一点，也能够让主列优先加载。
实现原理：
（1）添加一个包裹框，设置padding-leftpadding-right值，比子列宽度大一个空隙的宽度。
（2）主列，子列都设置为float: left 左子列margin-left设置为-100%，并且设置为position:relative; left: -110px将左子列放置到左侧。右子列同理。
（3）主列只需设置宽度为100%即可。包裹框的宽度不要设置为100%，自适应即可。
html代码如下
XML/HTML Code复制内容到剪贴板
  1. <divclass="wrapper">
  2. <divclass="main"></div>
  3. <divclass="left"></div>
  4. <divclass="right"></div>
  5. </div>
css代码如下
CSS Code复制内容到剪贴板
  1. .wrapper{
  2. padding-left:110px;
  3. padding-right:110px;
  4. overflow:hidden;
  5. }
  6. .main{
  7. float:left;
  8. width:100%;
  9. height:100px;
  10. background-color:#ccc;
  11. }
  12. .left{
  13. float:left;
  14. width:100px;
  15. height:100px;
  16. margin-left:-100%;
  17. position:relative;
  18. left:-110px;
  19. _left:0;
  20. background-color:orange;
  21. }
  22. .rightright{
  23. float:left;
  24. width:100px;
  25. height:100px;
  26. background-color:orange;
  27. margin-left:-100px;
  28. position:relative;
  29. rightright:-110px;
  30. }
下面再给出一个高度占满全屏的例子：
CSS Code复制内容到剪贴板
  1. <p><!DOCTYPEhtml>
  2. <htmlxmlns="<atarget="_blank"rel="nofollow noopener noreferrer" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
  3. <headrunat="server">
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title></title>
  6. <styletype="text/css">
  7. body,html{
  8. margin:0px;
  9. }
  10. #header{
  11. background:blue;
  12. height:100px;
  13. width:100%;
  14. position:relative;/*父div的位置设置成相对的*/
  15. top:0;
  16. }
  17. #header#h_menu{
  18. position:absolute;
  19. bottombottom:0;
  20. background:yellow;
  21. width:100%;
  22. height:50px;
  23. }
  24. #middle{
  25. position:absolute;
  26. width:100%;
  27. height:auto;
  28. top:100px;
  29. bottombottom:50px;
  30. }
  31. .left{
  32. width:15%;/*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/
  33. background:red;
  34. float:left;
  35. height:100%;
  36. }
  37. .rightright{
  38. width:15%;/*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/
  39. height:100%;
  40. background:pink;
  41. float:rightright;
  42. }
  43. .center{
  44. height:100%;
  45. background:green;
  46. /*两种方式均可（一）margin(二)margin-left、margin-right*/
  47. /*（一）、用这种方式上面的left和right中的width是百分比或者像素值都可以*/
  48. margin:auto;
  49. /*(二)、这里是百分比或者像素值，对应上面的left、right中的width就是百分比或者像素值*/
  50. /*margin-left:15%;
  51. margin-right:15%;*/
  52. }
  53. #footer{
  54. background:blue;
  55. height:50px;
  56. width:100%;
  57. position:absolute;
  58. bottombottom:0;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <formid="form1"runat="server">
  64. <div>
  65. <divid="header">
  66. 上
  67. <divid="h_menu">
  68. 上_底
  69. </div>
  70. </div>
  71. <divid="middle">
  72. <divclass="left">
  73. 中左
  74. </div>
  75. <divclass="right">
  76. 中右
  77. </div>
  78. <divclass="center">
  79. 中间
  80. </div>
  81. </div>
  82. <divid="footer">
  83. 下
  84. </div>
  85. </div>
  86. </form>
  87. </body>
  88. </html>
  89. </p>

以上就是CSS如何实现页面两列布局与三列布局的方法示例。人活着就应该像齐天大圣，疯过，爱过，恨过，闯过，拼过，努力过，但从没怕过。更多关于CSS如何实现页面两列布局与三列布局的方法示例请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例