css常见的各种布局下----三列布局
作者：互联网
css 三列布局，左右固定宽度右边自适应
1不适用定位，只使用浮动可以实现左右固定，中间宽度自适应布局
1.1.1 自适应部分一定要放第一个位子，使用浮动，并且设置宽度为100%，不设置浮动元素内容不够称不开整个宽度
1.1.2 左右固定部位，使用margin-left :负数，使其左右靠齐
1.1.3 中间自适应部分嵌套一个div，设置margin-left 和 margin-right 使其空出左右固定的宽度
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
}
.box .box-content {
height: 100%;
float: left; /* 一定要设置浮动，要不下面的模块上不来 */
width:100%;/* 一定要设置100%，要不内容不够称不开整个页面 */
background-color: blue;
/* 默认还是整行 */
}
.box .box-content .child {
margin: 0 210px;
/* 中间模块空出左右距离，设置浮动 */
background: red;
height: 100%;
}
.box .box-left {
width: 200px; float: left;
margin-left: -100%; /* 设置浮动， margin-left:-100% 可以使元素往上移一行，并且移动到最左边 */
height: 300px;
background-color: green;
}
.box .box-right {
float: left;
width: 200px;
min-height: 100%;
margin-left: -200px;/* 设置浮动， margin-left:负的自身宽度 可以使元素往上移一行，并且移动到最右边 */
background-color: pink;
}
header,footer { height: 75px; background-color: aqua; }
</style>
</head>
<body>
<header> </header>
<div class="box">
<div class="box-content">
<div class="child">
中间主题内容
</div>
</div>
<div class="box-left">
11dsdasdas不你弟弟呢单独
</div>
<div class="box-right">
12酷酷酷酷酷的的是计算机技术升级的历史记录
</div>
</div>
<footer>
</footer>
</body>
</html>
1.2 其实只是简单的中间内容自适应，还可以设置，中间的元素块状元素盒子模型为ie下的盒子模型，
再使用padding也是可以实现的
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
}
.box .box-content {
box-sizing:border-box;
height: 100%;
float: left; /* 一定要设置浮动，要不下面的模块上不来 */
width:100%;/* 一定要设置100%，要不内容不够称不开整个页面 */
/* 默认还是整行 */
padding:0 210px;
}
.box .box-content .child {
/* 中间模块空出左右距离，设置浮动 */
background-color: blue;
height: 100%;
}
.box .box-left {
width: 200px; float: left;
margin-left: -100%; /* 设置浮动， margin-left:-100% 可以使元素往上移一行，并且移动到最左边 */
height: 300px;
background-color: green;
}
.box .box-right {
float: left;
width: 200px;
min-height: 100%;
margin-left: -200px;/* 设置浮动， margin-left:负的自身宽度 可以使元素往上移一行，并且移动到最右边 */
background-color: pink;
}
header,footer { height: 75px; background-color: aqua; }
</style>
<body>
<header> </header>
<div class="box">
<div class="box-content">
<div class="child"><!-- 这个div只是为了方便看，设置了以下背景色 可用可不用，内容区还是自适应的 -->
中间主题内容
</div>
</div>
<div class="box-left">
11dsdasdas不你弟弟呢单独
</div>
<div class="box-right">
12酷酷酷酷酷的的是计算机技术升级的历史记录
</div>
</div>
<footer>
</footer>
</body>
2，上面其实是圣杯布局，我们再使用中间相对定位，左右两边绝对定位（中间绝对定位，不设置宽度撑不开容器）
其实只要中间的位子对应了，左右两边不管是相对定位，还是绝对定位都可以
重点当然还是中间怎么取定位（元素顺序没有关系）
如果中间取相对定位，不设置浮动，设置margin 空出左右距离，
两边取绝对定位，只要设置top:0 一个left:0 一个right:0
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
overflow: hidden;
}
.box .box-content {
position: relative;
height: 100%;
margin-left: 210px;
margin-right: 210px;
background-color: blue;
}
.box .box-left {
width: 200px;
position: absolute;
height: 300px;
left: 0;
top:0;
background-color: green;
}
.box .box-right {
width: 200px;
position: absolute;
min-height: 100%;
right: 0px;
top:0;
background-color: pink;
}
header,footer { height: 75px; background-color: aqua; }
</style>
</head>
<body>
<header> </header>
<div class="box">
<div class="box-content">
<div class="child">
中间主题内容asdasdasdsadsasda嘎达可根但是萨嘎萨嘎据阿里就够了及代理商解放螺
丝钉结案率放假啊了解
</div>
</div>
<div class="box-left">
11dsdasdas不你弟弟呢单独
</div>
<div class="box-right">
12酷酷酷酷酷的的是计算机技术升级的历史记录
</div>
</div>
<footer>
</footer>
</body>
</html>
3.我们再看下使用定位的双飞燕布局， 双飞燕，要对父容器设置padding ,大小等一左右固定宽度
左右两边据对定位，就这个和上面的方法差不多，我们一起看看左右两边相对定位
如果左右两边相对定位，设置margin和和left
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
overflow: hidden;
padding: 0 210px;
}
.box .box-content {
height: 100%;
float: left;
background-color: blue;
}
.box .box-left {
width: 200px;
position: relative;
height: 300px;
float: left;
left: -210px;
margin-left: -100%;
background-color: green;
}
.box .box-right {
width: 200px;
position: relative;
min-height: 100%;
float: left;
margin-left: -200px;
right: -210px;
background-color: pink;
}
header,footer { height: 75px; background-color: aqua; }
</style>
</head>
<body>
<header> </header>
<div class="box">
<div class="box-content">
够了及代理商解放螺丝钉结案率放假啊了解多嘎多gags广东省水水水水水水水水水水
水水顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
</div>
<div class="box-left">
11dsdasdas不你弟弟呢单独
</div>
<div class="box-right">
12酷酷酷酷酷的的是计算机技术升级的历史记录
</div>
</div>
<footer>
</footer>
</body>
</html>
标签：box,color,100%,布局,三列,height,background,css,left 来源： https://www.cnblogs.com/czkolve/p/10725926.html