基础//页面布局——三栏布局2

最新推荐文章于 2021-06-26 22:34:36 发布

爱吃松果的美美

最新推荐文章于 2021-06-26 22:34:36 发布

阅读量148

点赞数

分类专栏： # 基础-知识点总结文章标签： html css

本文链接：https://blog.csdn.net/weixin_37877794/article/details/108516334

版权

基础-知识点总结专栏收录该内容

32 篇文章 0 订阅

订阅专栏

文章目录

一、题目
二、我的代码详情
三、总结

一、题目

根据题目给出你的答案。
（上栏、下栏高度固定，中间自适应）
题目：假设宽度已知，请写出三栏布局，其中上栏、下栏高度各位150px，中间自适应。

二、我的代码详情

https://codepen.io/janmie-cjm/pen/vYGReEv

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>页面布局-三栏布局2</title>
  <style>
    html *{
      margin: 0;
      padding: 0;
    }
    html,body {
      height: 100%;
      background-color: #ffffee;
    }
    article {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
<!--  假设宽度已知，请写出三栏布局，其中上栏、下栏高度各位150px，中间自适应。  -->
<!-- 1-绝对定位 -->
  <section>
    <style>
      .wrapper1 {
        width: 100px;
      }
      .top1,.bottom1 {
        background-color: #cff;
        height: 50px;
        display: absolute;
      }
      .top1 {
        top: 0;
      }
      .bottom {
        bottom: 0;
      }
      .center1 {
        background-color: #fcc;
      }
    </style>
    <article>
      <div class="wrapper1">
        <div class="top1">我是top</div>
        <div class="center1">
          <h6>1-绝对定位</h6>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
        </div>
        <div class="bottom1">我是bottom</div>
      </div>
    </article>
  </section>
  
<!-- 2-flexbox -->
  <section>
    <style>
      .wrapper2 {
        width: 100px;
        display: flex;
        flex-direction: column;
      }
      .center2 {
        background-color: #fcc;
        flex: 1;
      }
      .top2,.bottom2 {
        height: 50px;
        background-color: #cff;
      }
    </style>
    <article>
      <div class="wrapper2">
      <div class="top2">我是top</div>
      <div class="center2">
        <h6>2-flexbox</h6>
        <p>我是center</p>
        <p>我是center</p>
        <p>我是center</p>
        <p>我是center</p>
        <p>我是center</p>
        <p>我是center</p>
        <p>我是center</p>
        <p>我是center</p>
        <p>我是center</p>
        <p>我是center</p>
      </div>
      <div class="bottom2">我是bottom</div>
    </div>
    </article>
  </section>
  
<!-- 3-table -->
  <section>
    <style>
      .wrapper3 {
        display: table;
      }
      .wrapper3 div {
        display: table-columns;
        width: 100px;
      }
      .top3,.bottom3 {
        background-color: #cff;
        height: 50px;
      }
      .center3 {
        background-color: #fcc;
      }
    </style>
    <article>
      <div class="wrapper3">
        <div class="top3">我是top</div>
        <div class="center3">
          <h6>3-table</h6>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
        </div>
        <div class="bottom3">我是bottom</div>
      </div>
    </article>
  </section>
  
<!-- 4-grid -->
  <section>
    <style>
      .wrapper4 {
        display: grid;
        grid-template-rows: 50px auto 50px;
        grid-template-columns: 100px;
      }
      .top4,.bottom4 {
        background-color: #cff;
      }
      .center4 {
        background-color: #fcc;
      }
    </style>
    <article>
      <div class="wrapper4">
        <div class="top4">我是top</div>
        <div class="center4">
          <h6>4-grid</h6>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
          <p>我是center</p>
        </div>
        <div class="bottom4">我是bottom</div>
      </div>
    </article>
  </section>
</body>
</html>

三、总结

本题目的解决方案有哪些？
绝对定位 / flexbox / 表格布局 / 网格布局；
上中下的三栏布局不需要应用以上布局方式也可以，只要每一部分内容都在各自的块级元素内，内容会自动自上而下分布。

-代码中 “html *{…}” 可以全局应用； table布局
-解决方案中，外层需要用display:table；里面子元素需要用到display: table-column;
-网格布局解决方案中，代码直接应用在外层包裹层上，display: grid; grid-template-rows添加多行，grid-template-columns 添加多列。

*代码尚存在很多不足，望提出不同的意见，互相交流。*

爱吃松果的美美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础//页面布局——三栏布局2

文章目录一、题目二、我的代码详情三、总结一、题目根据题目给出你的答案。（上栏、下栏高度固定，中间自适应）题目：假设宽度已知，请写出三栏布局，其中上栏、下栏高度各位150px，中间自适应。二、我的代码详情https://codepen.io/janmie-cjm/pen/vYGReEv<!DOCTYPE html>html *{ padding: 0; margin: 0;}三、总结本题目的解决方案有哪些？浮动 / 绝对定位 / flexbox / 表.
复制链接

扫一扫