常见的css布局

常见的css布局

两列布局

QQ20190607-214953@2x.png

float方式

两列布局是一侧固定,另一侧自适应。一般一个浮动,另一个设置margin,或者一个绝对定位,另一个设置margin

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    .left{
       float: left;
       width: 200px;
       background:#66ffcc;
       height: 200px;
    }
    .right{
        margin-left:200px;
        background: limegreen;
        height: 200px;
    }
  </style>
  <body>
  <div class="left">左边。。。。。。。。。</div>
  <div class="right">右边。。。。。。。。。。</div>
  </body>
</html>

flex方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo</title>
  <style>
      *{
        margin: 0;
        padding:0;
      }
      body{
          display: flex;
          justify-content: flex-end;
      }
      .left{
        width:300px;
        background:#66ffcc;
        height: 200px;
      }
      .right{
        flex: 1;
        background: limegreen;
        height: 200px;
      }
      </style>
  <body>
  <div class="left">左边固定。。。。。。</div>

  <div class="right">右边自适应。。。。。</div>
  </body>
</html>

三列布局

QQ20190607-222647@2x.png
三列布局特点是其中两列宽度固定,剩下一个自适应,方法是两个浮动自适应那个设置margin,比如左右固定,中间自适应可以左右分别设置float为left,right,然后中间那个设置margin left right分别为左右两栏宽度。代码如下

float布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    .left{
        float: left;
        width: 200px;
        background: #00FF66;
        height: 200px;
    }
    .center{
        margin: 0 300px 0 200px;
        background: #FF3333;
        height: 200px;
    }
    .right{
        float: right;
        width:300px;
        background: #FF99CC;
        height: 200px;
    }
    </style>
<body>
<div class="left">左边固定。。。。。。。</div>

<div class="right">右边固定。。。。。。。</div>
<div class="center">中间自适应。。。。。。</div>

</body>
</html>

其他三列布局思路和这个差不多
使用float布局,注意文档顺序即可(浮动写在了最后)。或者将浮动换成绝对定位,这样不需要注意文档顺序。

flex 布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    body{
        display: flex;
        justify-content: space-between;
    }
    .left{
        width:200px;
        background: #00FF66;
        height: 200px;
    }

    .right{
        width:100px;
        background: #FF3333;
        height: 200px;
    }
    .center{
         flex: 1;
         background: #FF99CC;
         height: 200px;
     }
    </style>
<body>
<div class="left">左边固定。。。。。。。</div>
<div class="center">中间自适应。。。。。。</div>
<div class="right">右边固定。。。。。。。</div>
</body>
</html>

参考文章
css常见布局

发表评论

电子邮件地址不会被公开。 必填项已用*标注