三栏布局左右固定，间自适应的几种方式

武飞扬头像

浅墨、离殇

2024-04-23 帮助1人

1、flex布局（强烈推荐）

实现方式：左右两栏设置宽度，中间栏设置 flex:1,占满余下部分

<!DOCTYPE html>
<html lang="en">
<head>
<title>flex布局</title>
<style>
.main{
height: 60px;
display: flex;
}
.left,
.right{
height: 100%;
width: 200px;
background-color: #ccc;
}
.content{
flex: 1;
background-color: #eee;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</div>
</body>
</html>

学新通

2、grid布局

实现方式：左右两栏设置宽度，中间栏宽度auto

<!DOCTYPE html>
<html lang="en">
<head>
<title>grid布局</title>
<style>
body {
display: grid;
grid-template-columns: 200px auto 200px;
grid-template-rows: 60px;
}
.left,
.right {
background-color: #ccc;
}
.content {
background-color: #eee;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</body>
</html>

学新通

3、magin负值法

实现方式：左右两栏均左浮动，中间栏外层盒子设置浮动，中间栏设置左右两栏宽度的margin值，左栏设置margin -100%，右栏设置 margin值为负的盒子宽度。

学新通

4、自身浮动法

实现方式：左栏左浮动，右栏右浮动，中间栏放最后不浮动，设置左右margin值

<!DOCTYPE html>
<html lang="en">
<head>
<title>自身浮动法</title>
<style>
.left,
.right {
height: 60px;
width: 200px;
background-color: #eee;
}
.left {
float: left;
}
.right {
float: right;
}
.content{
height: 60px;
background-color: #ccc;
margin: 0 200px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</body>
</html>

学新通

5、绝对定位法

实现方式：左右两栏绝对定位，分别定位到盒子的两侧，中间栏采用margin值撑开盒子

注意：采用定位时，浏览器默认的padding或margin值会影响布局，需要初始化样式 margin:0;padding：0；

学新通

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhgeiehk

系列文章

同类精品