常见响应式布局

本文详细介绍了响应式布局的各种实现方式,包括三栏布局、左右固定中间自适应、流体布局、BFC布局、圣杯布局、双飞翼布局、Flex弹性盒子以及Grid网格布局。通过这些布局方式,可以灵活适应不同屏幕尺寸,创建出适应性强的网页设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

三栏布局

左右固定、中间自适应

流体布局

左侧和右侧固定宽度,中间自适应

  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>
      .left {
      background-color: red;
      float: left;
      width: 100px;
      height: 200px;
    }
    .center {
      background-color: orange;
      margin-left: 100px;
      margin-right: 100px;
      height: 200px;
    }
    .right {
      background-color: blue;
      float: right;
      width: 100px;
      height: 200px;
    }

流体布局

BFC布局

利用BFC,左右固定,中间自适应

  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
    <style>
    .left {
      float: left;
      width: 200px;
      background-color: orange;
      height: 200px;
    }

    .right {
      float: right;
      width: 200px;
      background-color: red;
      height: 200px;
    }

    .center {
      overflow: hidden;
      background-color: greenyellow;
      height: 200px;
    }
  </style>

BFC三栏布局

圣杯布局

<div class="container">
    <div class="center"></div>
    <div class="left "></div>
    <div class="right "></div>
    <div style="clear: both;"></div>
  </div>
   <style>
    .container {
      padding-left: 200px;
      padding-right: 200px;
      min-width: 600px;
    }

    .left {
      float: left;
      height: 200px;
      width: 200px;
      background-color: orange;
      position: relative;
      margin-left: -100%;
      left: -200px;
    }

    .right {
      float: left;
      height: 200px;
      width: 200px;
      background-color: orangered;
      margin-right: -200px;
    }

    .center {
      float: left;
      height: 200px;
      width: 100%;
      background-color: greenyellow;
    }
  </style>

圣杯布局

双飞翼布局

  <div class="container">
    <div class="center"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
    body{
    min-width: 400px;
  }
  .container {
    float: left;
    width: 100%;
  }

  .center {
    margin-left: 200px;
    margin-right: 200px;
    height: 200px;
    background-color: orchid;
  }

  .left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: orangered;
    margin-left: -100%;
  }

  .right {
    float: left;
    width: 200px;
    height: 200px;
    background-color: greenyellow;
    margin-left: -200px;
  }

双飞翼布局

使用Flex弹性盒子

  <div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <style>
  .container{
    display: flex;
  }
  .center{
    flex-grow: 1;
    height: 200px;
    background-color: greenyellow;
  }
  .left{
    order: -1;
    flex: 0 0 200px;
    height: 200px;
    background-color: grey;
  }
  .right{
    flex: 0 0 200px;
    height: 200px;
    background-color: hotpink;
  }
</style>

使用定位布局

  <div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
  <style>
  .container {
    position: relative;
  }

  .left {
    position: absolute;
    background-color: hotpink;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;
  }

  .center {
    margin: auto 200px auto 200px;
    background-color: indigo;
    height: 200px;
  }

  .right {
    position: absolute;
    background-color: lawngreen;
    width: 200px;
    height: 200px;
    top: 0;
    right: 0;
  }
</style>

网格Grid布局

  <div class="container">
    <div style="background-color: lawngreen;"></div>
    <div style="background-color: lightblue;"></div>
    <div style="background-color: lightcoral;"></div>
  </div>
<style>
  .container{
    display: grid;
    grid-template-columns: 200px auto 200px;
    grid-template-rows: 200px;
  }
</style>

使用calc属性

  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>
   .left {
    float: left;
    background-color: lightskyblue;
    height: 200px;
    width: 200px;
    margin-left: -100%;
  }

  .right {
    float: left;
    background-color: lightgreen;
    height: 200px;
    width: 200px;
    margin-left: -200px;
  }

  .center {
    float: left;
    background-color: lightcoral;
    height: 200px;
    margin: auto 200px auto 200px;
    width: calc(100% - 400px);
  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值