css佈局實例第二篇：3種方法實現三欄佈局高度不定，左右寬度必定，中間寬度自適應

時間  2020-06-01
標籤 css 佈局 實例 第二 方法 實現 高度 不定 左右 寬度 必定 中間 自適應 欄目 CSS 简体版
原文   原文鏈接

承接上文思考2css

  • flex佈局，table佈局，grid佈局能夠實現高度不定，左右自適應中間高度
  • float佈局overflow:hidden能夠使中間內容垂直排布，不能左右自適應；
  • 絕對定位佈局只能指定固定高度，不能左右自適應；
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css佈局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }

      section {
        margin-bottom: 20px;
        margin-top: 20px;
      }

      .left {
        background-color: aqua;
      }

      .mid {
        background-color: burlywood;
      }

      .right {
        background-color: coral;
      }
      ul li {
        list-style: none;
      }
    </style>
  </head>

  <body>
    <p>
      題目：假設高度不定，請寫出三欄佈局，其中左欄右欄會根據中間內容撐開，中間自適應。
    </p>

    <!-- flex佈局 -->
    <section class="flex">
      <style>
        .flex article {
          display: flex;
        }

        .flex-left {
          width: 100px;
        }

        .flex-right {
          width: 100px;
        }

        .flex-mid {
          flex: 1;
        }
      </style>
      <article>
        <div class="left flex-left"></div>
        <div class="mid flex-mid">
          我是用的flexbox
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
          </ul>
        </div>
        <div class="right flex-right"></div>
      </article>
    </section>

    <!-- table佈局 -->
    <section class="table">
      <style>
        .table article {
          display: table;
          width: 100%;
        }

        .table-left {
          display: table-cell;
          width: 100px;
        }

        .table-right {
          display: table-cell;
          width: 100px;
        }

        .table-mid {
          display: table-cell;
        }
      </style>
      <article>
        <div class="left table-left"></div>
        <div class="mid table-mid">
          我是用的表格佈局
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
          </ul>
        </div>
        <div class="right table-right"></div>
      </article>
    </section>
    <!-- 網格佈局 -->
    <section class="grid">
      <style>
        .grid article {
          display: grid;
          width: 100%;
          grid-template-columns: 100px auto 100px;
        }
      </style>
      <article>
        <div class="left grid-left"></div>
        <div class="mid grid-mid">
          我是用的網格佈局
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
          </ul>
        </div>
        <div class="right grid-right"></div>
      </article>
    </section>
    <!-- 浮動佈局 -->
    <section class="float">
      <style>
        .float {
          overflow: hidden;
        }
        .float-left {
          float: left;
          width: 100px;
          min-height: 100px;
        }

        .float-right {
          float: right;
          width: 100px;
          min-height: 100px;
        }
        .float-mid {
          overflow: hidden;
        }
      </style>
      <article>
        <div class="left float-left"></div>
        <div class="right float-right"></div>
        <div class="mid float-mid">
          我是用的浮動
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
          </ul>
        </div>
      </article>
    </section>
    <!-- 絕對定位 -->
    <section class="position">
      <style>
        .position article {
          position: relative;
        }

        .position-left {
          position: absolute;
          left: 0;
          width: 100px;
          height: 100px;
        }

        .position-right {
          position: absolute;
          right: 0;
          width: 100px;
          height: 100px;
        }

        .position-mid {
          position: absolute;
          left: 100px;
          right: 100px;
        }
      </style>
      <article>
        <div class="left position-left"></div>
        <div class="right position-right"></div>
        <div class="mid position-mid">
          我是用的絕對定位
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
          </ul>
        </div>
      </article>
    </section>
    思考：
  </body>
</html>

效果預覽：
截屏2020-05-31 下午11.54.42.pnghtml

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程