两边固定，中间自适应的两种布局

最新推荐文章于 2024-06-26 11:38:48 发布

wuliuqi62

最新推荐文章于 2024-06-26 11:38:48 发布

阅读量171

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/wuliuqi62/article/details/120063430

版权

本文介绍了四种不同的CSS技术来实现页面元素的并排显示：1) 使用浮动和负边距；2) 中间元素单独一级，两侧元素一级；3) 利用CSS计算；4) 应用flex布局。每种方法都有其特点和适用场景，展示了CSS在布局控制上的灵活性。

摘要由CSDN通过智能技术生成

一、三个元素处于同一级别

    <style>
    .container {
      height: 100%;
      padding: 0 200px;
    }
  
    .left,
    .right {
      width: 200px;
      min-height: 200px;
      background-color: rgb(127, 224, 192);
    }
    
    .center {
      width: 100%;
      min-height: 200px;
      background-color: rgb(177, 135, 143);
    }
  
    .left,
    .center,
    .right {
      float: left;
    }
  
    .left {
      margin-left: -100%;
      position: relative;
      /*相对于正常定位时的位置*/
      left: -200px;
    }
    .right {
      margin-right: -200px;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

结果如图所示
在这里插入图片描述

二、中间元素自称一级，左右两边为一级

  <style>
    .left,
    .container,
    .right {
      float: left;
    }

    .container {
      width: 100%;
    }

    .container .center {
      margin: 0 200px;
      min-height: 200px;
      background-color: rgb(177, 135, 143);
    }

    .left,
    .right {
      width: 200px;
      min-height: 200px;
      background-color: rgb(127, 224, 192);
    }
    
    .left {
      margin-left: -100%;
    }
    .right {
      margin-left: -200px;
    }

  </style>
</head>
<body>
    <div class="container">
      <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

结果如图
在这里插入图片描述

关于margin负值的理解

三、利用CSS计算实现（不支持，对渲染性能有影响）

  <style>
    .left,
    .center,
    .right {
      float: left;
    }

    .left,
    .right {
      width: 200px;
      height: 200px;
      background-color: rgb(133, 228, 228);
    }

    .center {
      width: calc(100% - 400px);
      min-height: 200px;
      background-color: rgb(177, 135, 143);
    }
  </style>
</head>
<body>
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>

四、使用flex布局实现

  <style>
    .container {
      display: flex;
      justify-content: space-between;
      height: 100%;
    }

    .left,
    .right {
      flex: 0 0 200px;
      height: 200px;
      background-color: rgb(113, 156, 156);
    }

    .center {
      flex: 1;
      min-height: 200px;
      background-color: rgb(199, 168, 199);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>

效果如图所示
在这里插入图片描述

五、利用子绝父相的定位来实现

  <style>
    .container {
      position: relative;
      height: 100%;
    }

    .left,
    .right {
      position: absolute;
      top: 0;
      width: 200px;
      min-height: 200px;
      background-color: rgb(113, 156, 156);
    }

    .left {
      left: 0;
    }

    .right {
      right: 0;
    }

    .center {
      margin: 0 200px;
      min-height: 400px;
      background-color: rgb(199, 168, 199);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>

效果如图
在这里插入图片描述

wuliuqi62

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
两边固定，中间自适应的两种布局

一、三个元素处于同一级别 <style> .container { height: 100%; padding: 0 200px; } .left, .right { width: 200px; min-height: 200px; background-color: rgb(127, 224, 192); } .center { width: 100%
复制链接

扫一扫