一
先center center宽100%。左中右浮动 左右margin-left上去。 container设置左右padding。三个position:relative， 左右left right。
- 先定义好header和footer的样式，使之横向撑满。
- 在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。
- 三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满
- 这样因为浮动的关系，center会占据整个container，左右两块区域被挤下去了
- 接下来设置left的 margin-left: -100%;，让left回到上一行最左侧
- 但这会把center给遮住了，所以这时给外层的container设置 padding-left: 200px;padding-right: 150px;，给left和right空出位置
- 这时left并没有在最左侧，因为之前已经设置过相对定位，所以通过 left: -200px; 把left拉回最左侧
- 同样的，对于right区域，设置 margin-left: -150px; 把right拉回第一行
- 这时右侧空出了150px的空间，所以最后设置 right: -150px;把right区域拉到最右侧就行了。
<style>
body {
min-width: 500px
}
#top,
#footer {
background-color: red;
height: 200px;
}
#footer {
clear: both;
}
#container {
background-color: green;
padding-left: 100px;
padding-right: 100px;
}
.column {
height: 200px;
float: left;
position: relative;
}
#center {
width: 100%;
background-color: yellow;
}
#left {
background-color: orange;
width: 100px;
margin-left: -100%;
left: -100px
}
#right {
background-color: pink;
width: 100px;
margin-left: -100px;
right: -100px
}
</style>
</head>
<body>
<div>
<div id="top"></div>
<div id="container">
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer"></div>
</div>
</body>
二
先center，包含div， center宽100%。左中右浮动 左右margin-left上去。content设置左右margin。
- left、center、right三种都设置左浮动
- 设置center宽度为100%
- 设置负边距，left设置负边距为100%，right设置负边距为自身宽度
- 设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度
<style>
body {
min-width: 700px;
}
#top,
#footer {
width: 100%;
height: 200px;
background-color: red;
}
#footer {
clear: both
}
#container {}
.column {
height: 200px;
float: left;
}
#left {
width: 100px;
background-color: green;
margin-left: -100%
}
#center {
width: 100%;
background-color: yellow;
}
#right {
width: 100px;
background-color: pink;
margin-left: -100px;
}
.content {
margin: 0 100px 0 100px;
}
</style>
</head>
<body>
<div>
<div id="top"></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"></div>
</div>
</body>
flex
flex弹性盒子
- header和footer设置样式，横向撑满。
- container中的left、center、right依次排布即可
- 给container设置弹性布局 display: flex;
- left和right区域定宽，center设置 flex: 1; 即可
<style>
body{
min-width: 700px
}
#top,#footer{
width: 100%;
height: 200px;
background-color: red;
}
#container{
display: flex;
}
.column{
height: 300px;
}
#left{
width: 100px;
background-color: green;
}
#right{
width: 100px;
background-color: green;
}
#center{
flex: 1;
background-color: pink;
}
</style>
</head>
<body>
<div>
<div id="top"></div>
<div id="container">
<div id="left" class="column">left</div>
<div id="center" class="column">center</div>
<div id="right" class="column">right</div>
</div>
<div id="footer"></div>
</div>
</body>
四.绝对定位法
将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度,注意中间元素不设置width:100%.
<style>
body {
margin: 0px;
min-width: 500px
}
#top,
#footer {
background-color: red;
height: 200px;
}
#container {
background-color: green;
}
.column {
height: 200px;
}
#center {
/* width: 100%;没有这个 */
background-color: yellow;
margin: 0 100px;
}
#left {
position: absolute;
background-color: orange;
width: 100px;
left: 0;
}
#right {
position: absolute;
background-color: pink;
width: 100px;
right: 0;
}
</style>
</head>
<body>
<div>
<div id="top"></div>
<div id="container"> <div id="left" class="column">left</div>
<div id="right" class="column">right</div>
<div id="center" class="column">center</div>
</div>
<div id="footer"></div>
</div>
五.使用自身浮动法
对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。
<style>
body {
margin: 0px;
min-width: 500px
}
#top,
#footer {
background-color: red;
height: 200px;
}
#container {
background-color: green;
}
.column {
height: 200px;
}
#center {
/* width: 100%;没有这个 */
background-color: yellow;
margin: 0 100px;
}
#left {
float:left;
background-color: orange;
width: 100px;
}
#right {
float: right;
background-color: pink;
width: 100px;
}
</style>
</head>
<body>
<div>
<div id="top"></div>
<div id="container">
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
<div id="center" class="column">center</div>
</div>
<div id="footer"></div>
</div>
</body>