正文

CSS两列及三列自适应布局方法整理

IP云
IP云V管理员/9 阅读
10/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
布局
自适应
两列
三列

在传统方法的基础上加入了Flex布局并阐述各方法的优缺点，希望对大家有所帮助。先上目录：

  • 两列布局：左侧定宽，右侧自适应
    • 方法一：利用float和负外边距
    • 方法二：利用外边距
    • 方法三：利用position
    • 方法四：利用flex布局
  • 三列布局：左右定宽，中间自适应。
    • 方法一：使用负外边距
    • 方法二：使用绝对定位
    • 方法三：使用flex布局

两列布局：左侧定宽，右侧自适应

方法一：利用float和负外边距

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.main,.sitebar{
font: bolder 20px/300px;
}
.main{
width: 100%;
float: left;
}
.main .content{
margin-left: 200px;
background-color: red;
}
.sitebar{
width: 200px;
float: left;
background-color: green;
margin-left: -100%;
}
</style>
</head>
<body>
<div class="main">
<div class="content">右侧主体自适应区块</div>
</div>
<div class="sitebar">左侧定宽200px区块</div>
</body>
</html>

  • 优点：考虑了页面优化，右侧主内容区先加载，左侧后加载。

  • 缺点：多添加了一层div包裹。

方法二：利用外边距

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.sitebar{
float: left;
width: 200px;
background-color: green;
}
.content{
background-color: red;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="sitebar">左侧定宽200px区块</div>
<div class="content">右侧主体自适应区块</div>
</body>
</html>

  • 优点：代码简洁，便于理解

  • 缺点：不利于页面优化，右侧主内容区后加载

方法三：利用position

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.sitebar{
width: 200px;
background-color: green;
}
.content{
position: absolute;
left: 200px;
right: 0;
top: 0;
background-color: red;
}
</style>
</head>
<body>
<div class="content">右侧主体自适应区块</div>
<div class="sitebar">左侧定宽200px区块</div>
</body>
</html>

  • 优点：考虑到了页面优化，右侧内容区先加载

  • 缺点：目测没有

上述三种方法兼容IE7以上，但在IE7下不设置高度时，会产生高度错位bug。可通过设置父元素font-size=0，再分别设置子元素font-size解决。

方法四：利用flex布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
display: flex;
}
.content{
flex:1;
background-color: red;
}
.sitebar{
flex:0 0 200px;
order:-1;
background-color: green;
}

</span><span class="hljs-tag" style="color: #cc6666;">&lt;/<span class="hljs-title" style="color: #8abeb7;">style</span>&gt;</span>

</head>

<body>

<div class="main">

<div class="content">右侧主体自适应区块</div>

<div class="sitebar">左侧定宽200px区块</div>

</div>

</body>

</html>

  • 优点：CSS3新布局方式，高大上

  • 缺点：仅支持IE11+。

三列布局：左右定款，中间自适应。

方法一：使用负外边距

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.main,.left,.right{
height: 300px;
font: 20px/300px;
color: #fff;
text-align: center;
}
.main{
width: 100%;
float: left;
}
.main .content{
margin: 0 300px 0 200px;
background-color: black;
}
.left{
width: 200px;
float: left;
margin-left: -100%;
background-color: red;
}
.right{
width: 300px;
float: left;
margin-left: -300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="content">中间主体区域宽度自适应</div>
</div>
<div class="left">左侧定宽200px</div>
<div class="right">右侧定宽300px</div>
</body>
</html>

  • 优点：兼容IE7+，考虑到页面优化，中间内容区先加载

  • 缺点：多一层div嵌套，不易理解

方法二：使用绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0px;
}
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
height: 400px;
width: 100px;
position: absolute;
top: 0px;
left: 0px;
}
#center {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 400px;
margin-right: 102px;
margin-left: 102px;
}
#right {
background-color: #FFE7F4;
border: 1px solid #F9B3D5;
height: 400px;
width: 100px;
position: absolute;
top: 0px;
right: 0px;
}
</style>
</head><body>

<div id="center">中列</div>

<div id="left">左列</div>

<div id="right">右列</div>

</body>

</html>

  • 优点：代码结构简单，考虑到了页面优化，中间内容去先加载

  • 缺点：目测没有

方法三：使用flex布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
background-color: green;
}.HolyGrail-nav, .HolyGrail-ads {

/* 两个边栏的宽度设为12em */

flex: 0 0 200px;

background-color: blue;

}.HolyGrail-nav {

/* 导航放到最左边 */

order: -1;

background-color: grey;

}

</style>

</head>

<body>

<div class="HolyGrail-body">

<main class="HolyGrail-content">...</main>

<nav class="HolyGrail-nav">...</nav>

<aside class="HolyGrail-ads">...</aside>

</div>

</body>

</html>

  • 优点：高大上

  • 缺点：仅支持IE11+