CSS:三栏布局
2018-05-02 本文已影响0人
肆意咯咯咯
1.position:absolute;定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,html{
width:100%;
height:100%;
padding:0;
margin:0;
}
.parent{
width:100%;
height:100%;
}
.left{
width:100px;
height:100%;
background-color:peachpuff;
position: absolute;
left:0;top:0;
}
.right{
width:100px;
height:100%;
background-color:peachpuff;
position: absolute;
right:0;top:0;
}
.center{
height:100%;
margin:0 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
注意：中间元素使用margin给左右元素留出位置；
2.float左右浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body,html{
height:100%;
}
.parent{
width:100%;
height:100%;
}
.left{
width:100px;
height:100%;
float:left;
background-color:blanchedalmond;
}
.right{
width:100px;
height:100%;
float:right;
background-color:blanchedalmond;
}
.center{
width:100%;
height:100%;
margin:0 100px;
background-color:plum;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
</body>
</html>
注意：中间元素必须放在最后；
3.flex:1;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
width:100%;
height:100%;
display:flex;
flex-direction: column;
}
header,footer{
width:100%;
background-color:mediumspringgreen;
flex:0 0 100px;
}
.parent{
width:100%;
display:flex;
flex-direction: row;
flex:1;
}
.left,.right{
flex:0 0 100px;
/*height:800px;*/
background-color:aquamarine;
}
.center{
background:red;
height:1000px;
/*
横向中间内容区自适应，即使未指定宽度，但会分配宽度
块级元素未主动设置宽度或未被子元素撑起宽度，浏览器默认为块级元素分配宽度为可使用的全部宽度，比如全屏宽。
*/
flex:1;
}
</style>
</head>
<body>
<header>header</header>
<section>
<div class="parent">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</section>
<footer>footer</footer>
</body>
注意：如果把center写在前面，则需要注意left将会在它的后面排列，则需将left元素的order属性设为-1;
.left{
order:-1;
}
使其排列在center前面；
接下来说一下三栏布局的两种经典：圣杯布局和 双飞翼布局；
圣杯布局
双飞翼布局
