今天看啥
    热点:

      天发国际娱乐官网:主要负责同志要在研究改革思路上发挥主导作用,充分结合本地区本部门的实际理出头绪、分清主次、明确目标,当好改革的主心骨。

      详解css布局实现左中右布局的5种方式,css布局


      本文介绍了详解css布局实现左中右布局的5种方式,分享给大家,具体如下:

      效果如下:

      左中右布局

      <!doctype html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport"
                content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <style>
              html *{
                  margin: 0;
                  padding: 0;
              }
      
              article{
                  height: 100px;
              }
              section{
                  margin-top: 10px;
              }
      
              .left{
                  width: 300px;
                  height: 100px;
                  background-color: #823384;
                  text-align: center;
                  font-size: 20px;
                  color: #fdf6e3;
              }
              .center{
                  height: 100px;
                  background-color: #d29922;
              }
              .right{
                  width: 300px;
                  height: 100px;
                  background-color: #0c8ac5;
                  text-align: center;
                  font-size: 20px;
                  color: #fdf6e3;
              }
      
          </style>
      </head>
      <body>
      <!--浮动布局-->
      <!--左浮动, 右浮动, 中间自动填充-->
      <section class="layout float">
          <style>
              .float article div{
      
              }
              .float article .left{
                  float: left;
              }
              .float article .right{
                  float: right;
              }
              .float article .center{
              }
      
          </style>
      
      
          <article class="left-right-center">
      
              <div class="left">左边</div>
              <div class="right">右边</div>
              <div class="center"><h1>
                  浮动float布局:
              </h1> 左元素: float: left; 右元素: float: right; 中间元素:自动填充</div>
      
          </article>
      </section>
      
      <!--绝对定位-->
      <section class="layout absolute">
          <style>
              article{
                  position: relative;
              }
      
              .absolute .left-center-right div{
                  position: absolute;
              }
      
              .absolute .left-center-right .left{
                  left: 0;
              }
      
              .absolute .left-center-right .center{
      
                  left: 300px;
                  right: 300px;
              }
      
              .absolute .left-center-right .right{
                  right: 0;
      
              }
      
          </style>
          <article class="left-center-right">
      
              <div class="left">左边</div>
              <div class="center"><h1>
                  绝对absolute定位布局:
              </h1> 左边元素: position: absolute; left: 0;
      
                  右边元素: position: absolute; right:0; 中间元素: position: absolute;left:300px; right: 300px;
              </div>
              <div class="right">右边</div>
          </article>
      </section>
      
      <!--flex布局-->
      <section class="layout flexbox">
      
          <style>
      
              .flexbox .left-center-right{
      
                  display: flex;
      
              }
              .flexbox .left-center-right .left{
      
              }
              .flexbox .left-center-right .center{
      
                  flex:1;
              }
      
              .flexbox .left-center-right .right{
      
              }
      
          </style>
      
          <article class="left-center-right">
              <div class="left">左边</div>
              <div class="center"><h1>
                  flex布局:
              </h1> 父元素display:flex; 左右子元素设置宽度300px; 中间子元素设置flex:1;</div>
              <div class="right">右边</div>
          </article>
      </section>
      
      <!--表格布局-->
      <section class="table-box layout">
          <style>
              .table-box .left-center-right{
                  width: 100%;
                  display: table;
              }
      
              .table-box .left-center-right>div{
      
                  display: table-cell;
      
              }
      
              .table-box .left-center-right .left{
              }
      
              .table-box .left-center-right .center{
              }
      
              .table-box .left-center-right .right {
              }
      
          </style>
          <article class="left-center-right">
              <div class="left">左边</div>
              <div class="center"><h1>
                  表格table布局:
              </h1> 父元素width: 100%; display: table;
                  左右子元素display: table-cell; width: 300px; </div>
              <div class="right">右边</div>
          </article>
      </section>
      
      <!--网格布局-->
      <section class="grid layout">
          <style>
      
              .grid article{
                  display: grid;
                  width: 100%;
                  grid-template-rows: 100px;
                  grid-template-columns: 300px auto 300px;
              }
      
          </style>
          <article class="left-center-right">
              <div class="left">左边</div>
              <div class="center"><h1>
                  网格grid布局:
              </h1> 父元素宽度为100%,
                  父元素width: 100%; display:grid; grid-template-rows: 100; grid-template-columns: 300px auto 300px</div>
              <div class="right">右边</div>
          </article>
      </section>
      </body>
      </html>

      以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

      www.1click-soft.comtruehttp://www.1click-soft.com/CSSjc/1310248.htmlTechArticle详解css布局实现左中右布局的5种方式,css布局 本文介绍了详解css布局实现左中右布局的5种方式,分享给大家,具体如下: 效果如下: 左...

      相关文章

        暂无相关文章
      相关搜索: Tag:css左中右布局

      帮客评论

      视觉看点
      百度 360 搜狗