两栏布局和三栏布局

最新推荐文章于 2023-05-14 09:05:56 发布

背包Boy

最新推荐文章于 2023-05-14 09:05:56 发布

阅读量74

点赞数

分类专栏： CSS/CSS3 文章标签： css

本文链接：https://blog.csdn.net/qq_42335214/article/details/115087910

版权

CSS/CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

两列布局：左固定、右适应

<body>
   <div class="box">
     <div class="aside"></div>
     <div class="main"></div>
   </div>
</body>

float + BFC

.aside{
 float: left;
   width: 200px;
   height: 200px;
   background-color: aqua;
 }
 .main{
   background-color: aquamarine;
   height: 200px;
   overflow: auto;
 }

float + margin-left

.aside{
 float: left;
  width: 200px;
  height: 200px;
  background-color: aqua;
}
.main{
  background-color: aquamarine;
  height: 200px;
  margin-left: 200px;
}

flex

.box{
 display: flex;
 }
 .aside{
   width: 200px;
   height: 200px;
   background-color: aqua;
 }
 .main{
   background-color: aquamarine;
   flex: 1;
   height: 200px;
 }

三栏布局

float + BFC

</style>
.left,.main,.right {
      height: 200px;
    }
    .left {
      float: left;
      width: 200px;
      background-color: red;
    }
    .main{
      overflow: hidden;
      background-color: hotpink;
    }
    .right{
      float: right;
      width: 200px;
      background-color: green;
    }
  </style>
</head>
<body>
   <div class="box">
     <div class="left"></div>
     <div class="right"></div>
     <div class="main"></div>
   </div>
</body>

flex

 .box{
      display: flex;
    }
    .left,.right,.main{
        height: 200px;
    }
    .left , .right {
      width: 200px;
      background-color: hotpink;
    }
    .main{
      background-color: red;
      flex: 1;
    }
  </style>
</head>
<body>
   <div class="box">
     <div class="left"></div>
     <div class="main"></div>
     <div class="right"></div>
   </div>
</body>

圣杯

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>三栏布局——圣杯布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      min-width: 550px;
    }
    .container {
      padding: 0 150px 0 200px;
      overflow: hidden;
    }
    .column {
      position: relative;
      float: left;
      min-height: 100px;
    }
    .left {
      left: -200px;
      margin-left: -100%;
      width: 200px;
      background: #ffbbff;
    }
    .center {
      width: 100%;
      background: #bfefff;
    }
    .right {
      right:-150px;
      margin-left: -150px;
      width: 150px;
      background: #eeee00;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column center">center</div>
    <div class="column left">left</div>
    <div class="column right">right</div>
  </div>
</body>
</html>

双飞翼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>三栏布局——双飞翼布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      min-width: 550px;
    }
    .container {
      overflow: hidden;
    }
    .column {
      float: left;
      min-height: 100px;
    }
    .left {
      margin-left: -100%;
      width: 200px;
      background: #ffbbff;
    }
    .center {
      width: 100%;
    }
    .center-inner {
      margin: 0 150px 0 200px;
      min-height: 100px;
      background: #bfefff;
    }
    .right {
      margin-left: -150px;
      width: 150px;
      background: #eeee00;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column center">
      <div class="center-inner">center</div>
    </div>
    <div class="column left">left</div>
    <div class="column right">right</div>
  </div>
</body>
</html>

背包Boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两栏布局和三栏布局

两列布局：左固定、右适应<body> <div class="box"> <div class="aside"></div> <div class="main"></div> </div></body>float + BFC.aside{ float: left; width: 200px; height: 200px; background-co
复制链接

扫一扫

专栏目录