CSS布局
2021-11-03 本文已影响0人
晓丽_c080
圣杯布局：三列布局，中间宽度自适应，两边定宽；中间栏要在浏览器中优先展示渲染；
三个子元素设置为 float 中间width：100%；左右width：100px;
left:margin-left:-100%; right:margin-right:100px; position : relative; left:-100px; right:-100px;
父盒子设置padding: 0 100px;
<div id="container">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
#container { padding: 0 100px;}
#middle {
background-color: lightpink;
height: 300px;
width: 100%;
float: left;
padding: 0 100px;
}
#left {
background-color: red;
height: 300px;
width: 100px;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
}
#right {
background-color: aqua;
height: 300px;
width: 100px;
float: left;
margin-left: -100px;
position: relative;
right: -100px;
}
双飞翼布局
left、center、right三种都设置左浮动
设置center宽度为100%
设置负边距，left设置负边距为100%，right设置负边距为自身宽度
设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
#header,
#footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
}
#container {
overflow: hidden;
}
.column {
text-align: center;
height: 300px;
line-height: 300px;
}
#left, #right, #center {
float: left;
}
#center {
width: 100%;
background: rgb(206, 201, 201);
}
#left {
width: 200px;
margin-left: -100%;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px;
margin-left: -150px;
background: rgb(231, 105, 2);
}
.content {
margin: 0 150px 0 200px;
}
</style>
<body>
<div id="header">#header</div>
<div id="container">
<div id="center" class="column">
<div class="content">#center</div>
</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>
</html>
