您的位置：首页 > Web前端 > > 正文

html一行两列布局代码（CSS实现页面两列布局与三列布局的方法示例）

更多 时间：2022-01-15 01:56:04 类别：Web前端 浏览量：718

html一行两列布局代码

CSS实现页面两列布局与三列布局的方法示例1. 使用BFC的原理实现
BFC的规则之一，就是BFC区域，不会与float box重叠，因此我们可以利用这一点来实现3列布局。
html代码如下
  • XML/HTML Code复制内容到剪贴板
    1. <li class="left"></li>  
    2. <li class="right"></li>  
    3. <li class="main"></li>  
    • 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. <li class="wrap">  
    2.   <li class="main-content">  
    3.     <li class="main"></li>  
    4.   </li>  
    5.   <li class="left"></li>  
    6.   <li class="right"></li>  
    7. </li>  
    • 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. <li class="wrapper">  
    2.   <li class="main"></li>  
    3.   <li class="left"></li>  
    4.   <li class="right"></li>  
    5. </li>  
    • 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><!DOCTYPE html>     
    2. <html xmlns="<a target="_blank" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">     
    3. <head runat="server">     
    4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
    5.     <title></title>     
    6.     <style type="text/css">     
    7.         body, html {     
    8.             margin: 0px;     
    9.         }     
    10.         #header {     
    11.             background: blue;     
    12.             height: 100px;     
    13.             width: 100%;     
    14.             position: relative; /*父li的位置设置成相对的*/     
    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.     <form id="form1" runat="server">     
    64.         <li>     
    65.             <li id="header">     
    66.                 上       
    67.                 <li id="h_menu">     
    68.                     上_底     
    69.                 </li>                  
    70.             </li>     
    71.             <li id="middle">     
    72.                 <li class="left">     
    73.                     中左     
    74.                 </li>     
    75.                 <li class="right">     
    76.                     中右     
    77.                 </li>     
    78.                 <li class="center">     
    79.                     中间     
    80.                 </li>     
    81.             </li>     
    82.             <li id="footer">     
    83.                 下     
    84.             </li>     
    85.         </li>     
    86.     </form>     
    87. </body>     
    88. </html>     
    89. </p>    

    • 标签：三列布局 两列布局 css
  • 上一篇：javascript怎么生成html控件（JavaScript+html实现前端页面滑动验证2）
  • 下一篇：php使用yield处理并发（Yii2.0框架模型多表关联查询示例）
    • 您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利