CSS实现三列布局，中间自适应

最新推荐文章于 2022-07-22 09:05:20 发布

飘逝才子

最新推荐文章于 2022-07-22 09:05:20 发布

阅读量331

点赞数 1

分类专栏： CSS 文章标签： CSS flex布局

本文链接：https://blog.csdn.net/weixin_38037451/article/details/82732390

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS实现三列布局

CSS+HTML实现一个三列布局，两边定宽，中部自适应

首先上效果图：
三列布局

主要思想就是三个div的外面用一个div套起来，使用flex布局，flex：1；属性实现中间div的宽度自适应

下面上代码
html结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>three Column</title>
</head>
<body>
  <div class="outer-container">
    <div class="lefter"></div>
    <div class="midder"></div>
    <div class="righter"></div>
  </div>
</body>
</html>

然后是css：

html, body {
  margin: 0;
  height: 100%;
}

.outer-container {
  display: flex;
  height: 100%;
}
.lefter {
  width: 200px;
  height: 100%;
  background-color: bisque;
  float: left;
}
.righter {
  width: 200px;
  height: 100%;
  background-color: bisque;
  float: right;
}
.midder {
  flex: 1;
  height: 100%;
  background-color: cadetblue;
}