假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应

最新推荐文章于 2020-08-18 20:21:09 发布

雷欧奥特曼±

最新推荐文章于 2020-08-18 20:21:09 发布

阅读量1.2k

点赞数 1

分类专栏： interView

本文链接：https://blog.csdn.net/lhban108/article/details/82773000

版权

interView 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

解决方案：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test1</title>
    <style media="screen">
      .left {
        width: 300px;
        background-color: blue;
        height: 200px;
        text-align: center;
      }
      .center {
        background-color: #ccc;
        height: 200px;
        text-align: center;
      }
      .right {
        text-align: center;
        width: 300px;
        background-color: red;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <!-- 浮动 -->
    <section class="sec1">
      <style media="screen">
        .sec1 .left {
          float: left;
        }
        .sec1 .right {
          float: right;
        }
      </style>
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="center">浮动 ： center--center--center--</div>
    </section>

    <!-- 绝对定位 -->
    <section class="sec2">
      <style media="screen">
      .sec2 {
        margin-top: 20px;
        position: relative;
      }
      .sec2 > div {
        position: absolute;
      }
      .sec2 .left {
        left: 0;
      }
      .sec2 .right {
        right: 0;
      }
      .sec2 .center {
        left: 300px;
        right: 300px;
      }
      </style>
      <div class="left">left</div>
      <div class="center">绝对定位 ： center--center--center--</div>
      <div class="right">right</div>
    </section>

    <!-- flex布局 -->
    <section class="sec3">
      <style media="screen">
        .sec3 {
          margin-top: 240px;
          display: flex;
        }
        .sec3 .center {
          flex: 1;
        }
      </style>
      <div class="left">left</div>
      <div class="center">flex : center--center--center--</div>
      <div class="right">right</div>
    </section>

    <!-- 表格布局 -->
    <section class="sec4">
      <style media="screen">
        .sec4 {
          margin-top: 20px;
          display: table;
          width: 100%
        }
        .sec4 > div {
          display: table-cell;
        }
      </style>
      <div class="left">left</div>
      <div class="center">表格布局 : center--center--center--</div>
      <div class="right">right</div>
    </section>

    <!-- 网格布局 -->
    <!-- CSS3下一代标准 -->
    <section class="sec5">
      <style media="screen">
        .sec5 {
          margin-top: 20px;
          display: grid;
          width: 100%;
          /* grid-template-rows: 100px; */
          grid-template-columns: 300px auto 300px;
        }
      </style>
      <div class="left">left</div>
      <div class="center">网格布局 : center--center--center--</div>
      <div class="right">right</div>
    </section>
  </body>
</html>
<!--
1、以上各种布局的优缺点，以及比较推荐哪一种方案
  (1)浮动 :
    - 缺点 :浮动是脱离文档流的，有些时候需要清除浮动，需要很好的处理浮动周边元素的关系
    - 优点 :兼容性比较好
  (2)绝对定位 :
    - 缺点 :该布局脱离文档流，所以子元素也必须脱离文档流，因此可使用性比较差
    - 优点 :快捷，比较不容易出问题
  (3)flex :
    - 缺点 :兼容性比较差(css3的属性)，不兼容IE8及以下
    - 优点 :非常有效的解决了浮动和绝对定位的问题
  (4)表格布局 :
    - 缺点 :操作繁琐，当三栏中其中某一栏高度超出时，其他两栏的高度也会自动跟着调整(不符合某些场景)
    - 优点 :兼容性非常好，补缺了flex布局兼容的问题
  (5)网格布局 :
    - 新技术，CSS3下一代局部方案
2、如果去掉"高度已知"， 以上哪种方案同样适用？
  只有 flex布局 和 表格布局 同样适用 
 -->

雷欧奥特曼±

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应

解决方案：&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;test1&lt;/title&gt; &lt;style media="
复制链接

扫一扫