css多列布局

最新推荐文章于 2024-09-06 15:49:09 发布

王源偷我华子抽

最新推荐文章于 2024-09-06 15:49:09 发布

阅读量317

点赞数 1

分类专栏： css.js 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_42917020/article/details/121922809

版权

css.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了三种常见的三栏布局技巧：使用浮动让左边元素固定宽度并左浮动，右侧自适应；利用BFC避免元素重叠；运用Flex布局设置左右固定宽度，中间自适应；以及绝对定位实现灵活的左右栏和居中区域。通过实例演示了这些技术在网页设计中的实际操作。

摘要由CSDN通过智能技术生成

两栏布局，左定右自适应

利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
       .outer {
        height: 100px;
      }
      .left {
        float: left;
        width: 200px;
        background: tomato;
      }
      .right {
        margin-left: 200px;
        width: auto;
        background: gold;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="left">嘻嘻</div>
      <div class="right">哈哈</div>
    </div>
  </body>
</html>

利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .left {
        width: 100px;
        height: 200px;
        background: red;
        float: left;
      }
      .right {
        height: 300px;
        background: blue;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="left">嘻嘻</div>
      <div class="right">哈哈</div>
    </div>
  </body>
</html>

利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        display: flex;
        height: 100px;
      }
      .left {
        width: 200px;
        background: tomato;
      }
      .right {
        flex: 1;
        background: gold;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="left">嘻嘻</div>
      <div class="right">哈哈</div>
    </div>
  </body>
</html>

三栏布局的实现

利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        position: relative;
        height: 100px;
      }

      .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background: tomato;
      }

      .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 100px;
        background: gold;
      }

      .center {
        margin-left: 100px;
        margin-right: 200px;
        height: 100px;
        background: lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="left">嘻嘻</div>
      <div class="center"></div>
      <div class="right">哈哈</div>
    </div>
  </body>
</html>

利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        display: flex;
        height: 100px;
      }

      .left {
        width: 100px;
        background: tomato;
      }

      .right {
        width: 100px;
        background: gold;
      }

      .center {
        flex: 1;
        background: lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="left">嘻嘻</div>
      <div class="center"></div>
      <div class="right">哈哈</div>
    </div>
  </body>
</html>