• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

两边宽度固定,中间自适应的布局实现总结(重点学习网格布局)

互联网 diligentman 2周前 (11-18) 7次浏览

实现左右栏宽度各为300px,中间自适应

两边宽度固定,中间自适应的布局实现总结(重点学习网格布局)

 

浮动属性 float:

float 主要为了实现图文环绕的效果;因为float具有不完全脱离文档流的特性,虽然脱离了文档流但是仍然会保留文字的占用空间;

float 会导致容器高度塌陷,因为在计算容器高度时会忽略浮动元素;

float 会为元素添加块级域,例:当给行内元素添加浮动就可以给行内元素设置宽/高属性。

  <div class="container">
      <style>
        .container {
          width: 1024px;
          margin: 30px auto;
        }
        .left {
          float: left;
          width:300px;
          background: red;
          height: 150px;    
        }
        .right {
          float: right;
          width:300px;
          background: red;
          height: 150px;    
        }
        .mid {
          height: 150px;
          overflow: auto;
        }
      </style>
      <span class="left"></span>
      <div class="right"></div>
      <div class="mid">
        <h1>浮动解决方案</h1>
		  这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
		  这是三栏布局中间部分
		  这是三栏布局中间部分
      </div>
    </div>

定位absolute: 完全脱离文档

<div class="container2">
        <style>
          .container2 {
            width: 1024px;
            margin: 30px auto;
            position: relative;
          }
          .left2 {
            position: absolute;
            left: 0;
            width:300px;
            height: 150px;   
            background: red; 
          }
          .right2 {
            position: absolute;
            right: 0;
            width:300px;
            height: 150px;   
            background: red; 
          }
          .mid2 {
            height: 150px;
            padding: 0 300px;
            overflow: auto;
          }
        </style>
        <div class="left2"></div>
        <div class="right2"></div>
        <div class="mid2">
          <h1>定位解决方案</h1>
            这是三栏布局中间部分
            这是三栏布局中间部分
            这是三栏布局中间部分
            这是三栏布局中间部分
            这是三栏布局中间部分
            这是三栏布局中间部分
            这是三栏布局中间部分
            这是三栏布局中间部分
            这是三栏布局中间部分
            这是三栏布局中间部分
            这是三栏布局中间部分
        </div>
    </div>

弹性盒子布局 : display: flex

容器主要属性:

flex-direction:主轴的方向;row | column

flex-wrap:是否换行;nowrap | wrap | wrap-reverse;

justify-content:项目在主轴上的对齐方式;flex-start | flex-end | center | space-between | space-around ;

应用:单项使用center属性能实现水平居中;两项使用space-between能实现左右排布。

align-items:项目在交叉轴上的对齐方式;flex-start | flex-end | center | baseline | stretch;

应用:单项使用center属性能实现垂直居中。

   <div class="container3">
      <style>
        .container3 {
            width: 1024px;
            margin: 30px auto;
            display: flex;
          }
          .left3, .right3 {
            width:300px;
            height: 150px;   
            background: red; 
          }
          .mid3 {
            flex: 1;
            height: 150px;
            overflow: auto;
          }
      </style>
      <div class="left3"></div>
      <div class="mid3">
          <h1>弹性盒子解决方案</h1>
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
      </div>
      <div class="right3"></div>
    </div>

表格布局: display: table && display: table-cell (查看display: cell的应用)

1. 表格的单元格可以设置vertical-align: center 实现垂直居中;

应用:多行文字垂直居中,或者高度不固定的元素垂直居中;

2. 宽度自动调节的自适应布局;

应用:经典两列自适应布局,带搜索按钮的搜索组件;

3. 表格的单元格最大的特点之一就是同一行列表元素都等高

应用:等高列表布局;

       <div class="container4">
          <style>
            .container4 {
                width: 1024px;
                display: table;
                margin: 30px auto;
              }
              .left4,.right4 {
                display: table-cell;
                width:300px; 
                height: 150px;
                background: red; 
              }
              .mid4 {
                display: table-cell;
              }
          </style>
          <div class="left4"></div>
          <div class="mid4">
              <h1>浮动解决方案</h1>
              这是三栏布局中间部分
              这是三栏布局中间部分
              这是三栏布局中间部分
              这是三栏布局中间部分
              这是三栏布局中间部分
              这是三栏布局中间部分
              这是三栏布局中间部分
              这是三栏布局中间部分
              这是三栏布局中间部分
              这是三栏布局中间部分
              这是三栏布局中间部分
          </div>
          <div class="right4"></div>
        </div>

网格布局:  display: grid (重点学习,太厉害了)

   <div class="container5">
      <style>
        .container5 {
          width: 1024px;
          margin: 30px auto;
          display: grid;
          grid-template-columns: 300px auto 300px;
          grid-template-rows: 150px;
        }
        .right5,.left5 {
          background: red;
        }
      </style>
      <div class="left5"></div>
      <div class="mid5">
          <h1>网格布局解决方案</h1>
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
          这是三栏布局中间部分
      </div>
      <div class="right5"></div>
    </div>

 


喜欢 (0)