视觉艺术

CSS实现三列布局的几种方式

2019-11-25  本文已影响0人  鲁女女

三列布局之全浮动方法


全浮动,使用calc设置宽度,不推荐使用calc,兼容不好,并且center不是优先加载

HTML部分

<div class="outer">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
</div>

CSS部分

.left{
      width:100px;
      height:200px;
      background-color:red;
      float:left;
}
.center{
      with:calc(100% - 200px);
      height:200px;
      background-color:#009ff2;
      float:left;
}
.right{
      width:100px;
      height:200px;
      background-color:pink;
      float:left;
}

三列布局之浮动方法


leftright浮动,center不设置宽度
center必须写在最后,center不是优先加载

HTML部分

<div class="outer">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

CSS部分

.left{
      width: 100px;
      height: 200px;
      background-color: red;
      float: left;
}
.right{
      width: 100px;
      height: 200px;
      background-color: pink;
      float: right;
}
.center{
      height: 200px;
      background-color: #009ff2;
      margin: 0 100px;
}

三列布局之定位方法


center位置随便写,左右margin:100px; 不要设置宽度
leftright分别定位在两边
缺点:无法进行等高布局

HTML部分

<div class="outer">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS部分

.outer{
  position: relative;
}
.left{
    width: 100px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
}
.right{
    width: 100px;
    height: 200px;
    background-color: pink;
    position: absolute;
    right: 0;
    top: 0;
}
.center{
    height: 200px;
    background-color: #009ff2;
    margin: 0 100px;
}

三列布局之圣杯方法


保证center优先加载,所以center放在第一个
内容足够小的时候,内容会换行

HTML部分

<div class="out">
    <div class="outer">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</div>

CSS部分

.out{
    overflow: hidden;
}
.outer{
    width: auto;
    margin: 0 100px;
}
.center{
    width: 100%;
    height: 200px;
    background-color: #009ff2; 
    float: left;
}
.left{
    width: 100px;
    height: 200px;
    background-color: red;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px;
}
.right{
    width: 100px;
    height: 200px;
    background-color:pink;
    float: left;
    margin-left: -100px;
    position: relative;
    right: -100px;
}

三列布局之双飞翼方法


1.给center添加一个父级mainmain全屏,center添加两边的margin),让mainleftright进行排列
2.给left盒子设置margin-left:-100%; 直接到位,right盒子设置margin-left:100px;也直接到位

HTML部分

<div  class='outer'>
      <div  class='main'>
              <div class='center'>center</div>
      </div>
      <div  class='left'>left</div>
      <div  class='right'>right</div>
</div>

CSS部分

.outer{
      overflow:hidden;
}
.main{
      float:left;
      width:100%;
}
.center{
      margin:0 100px;
      height:100px;
      background-color: #009ff2;
}
.left{
      float:left;
      width:100px;
      height:100px;
      background-color:red;
      margin-left: -100%;      
}
.right{
      float:left;
      width:100px;
      height:100px;
      background-color: pink;
      margin-left: -100px;
}

效果图

最终效果图
上一篇下一篇

猜你喜欢

热点阅读