Css布局系列-经典三列布局

今天给大家介绍经典三列布局和实现原理:

技术分享

  • 通过浮动(float)进行实现,如果对float不是很清楚可以去看看我上篇介绍的;
  • 通过绝对定位布局;
  • 通过float加margin的负值进行组合实现。

 对三种情况分析:

  1. 第一种通过浮动(float)布局,特别需要注意在定义元素结构的时候要将居中元素放到right元素的后面(container->left-right-center),不能像正常那种思维去定义结构(container ->left-center-right);
 *{margin: 0;padding: 0;}
 html, body{height: 100%;}
        
 .container, .left, .right, .center{height: 100%;}
 .left{float: left;width: 200px;background-color: #f60;}
 .right{float: right;width: 200px;background-color: #e30;}
 .center{background-color: #fde560;padding: 0 10px 0 10px;margin: 0 200px;}
    <div class="container">
        <div class="left">
        </div>
        <div class="right">
        </div>
        <div class="center">
           float布局。
        </div>
    </div>

2. 第二种在定义的时候必须设置最外层容器position: relative,在定义结构的时候左右合两边都设为绝对定位,且必须设置居中元素的左右边距marign(container ->left-center-right);

*{margin: 0;padding: 0;}
 html, body{height: 100%;}
      
.container, .left, .right, .center{height: 100%;}
.container{position: relative;}
.left, .right{top: 0;position: absolute;width: 200px;}
.left{left: 0;background-color: #f60;}
.right{right: 0;background-color: #e30;}
.center{background-color: #fde560;padding: 0 10px 0 10px;margin: 0 200px;}
    <div class="container">
        <div class="left">
        </div>
        <div class="center">
            绝对与相对进行组合布局 最外层容器必须设置  position: relative。
        </div>
        <div class="right">
        </div>
    </div>

  

3.  最后一种有一点复杂,利用margin负值加float的实现,大概讲讲他负值的作用,左边上边边距负值会向左和上偏移,右边下边边距负值会导致紧跟着后面元素与其重叠。

技术分享

*{margin: 0;padding: 0;}
 html, body{height: 100%;}
        
 .container, .left, .right, .main, .main-body{height: 100%;}
.left, .right{width: 200px;background-color: #f60;float: left;}
.left{margin-left: -100%;}
.right{background-color: #e30;margin-left: -200px;}
.main{float: left;width: 100%;}
.main-body{margin: 0 200px;background-color: rgb(250,250,154);}
 <div class="container">
        <div class="main">
            <div class="main-body">
                float浮动加margin负值组合布局。
            </div>
        </div>
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>

  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。