- 使用flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
min-width: 600px;
height: 100px;
display: flex;
margin: 10px;
}
#left,
#right {
flex-basis: 200px; /* 或width:200px */
height: 100px;
margin: 10px;
background-color: #999;
}
#center {
flex-grow: 1;
height: 100px;
margin: 10px;
background-color: #f00;
}
</style>
</head>
<body>
<div id="box">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</body>
</html>
box的600px足够容纳两侧各200px的固定长度div，所以两边的div不会随浏览器长度而变化，中间的div默认flex-grow为0，设置为1后，剩余长度都会加到它上面
- 利用浮动（float）
让左右元素浮动，缺点是中间元素必须置于二者之后，不然right元素会进入下一行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.left,.right{
width:200px;
height:200px;
background-color:#999;
}
.left{
float:left;
}
.right{
float:right;
}
.center{
margin:0 200px;
height:300px;
background-color:#f00;
}
</style>
</head>
<body>
<!--该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是
和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。
当浏览器窗口很小的时候，右边元素会被击倒下一行。-->
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</body>
</html>
- 利用绝对定位（position）
center居中并利用margin为左右两边留出位置，左右绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css三列布局</title>
<style type="text/css">
/*左右固定，中间自适应 利用绝对定位*/
.container {
width: 100%;
height: 100%;
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: black;
color: #fff;
}
.center {
/*width: auto;*/
/*如果没有这一句，那么，center这个div的文字就不会自动换行*/
margin: 0 400px;
height: 400px;
background-color: yellow;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
