CSS垂直三列居中，中间自适应

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS垂直三列居中，中间⾃适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 让页⾯的⾼100%，如果不设置html，body ⾼100%的话，我们后⾯设置div⾼100%就没有效果了 */
html,body{
width:100%;
height:100%;
}
body,div{
margin:0;
padding:0;
}
/* 注意这⾥我给盒⼦添加了⼀个右边padding200px ，让中的那个盒⼦空200px给右边的盒⼦*/
#box{
position:relative;
padding-right:200px;
height:100%;
}
/* 让盒⼦左浮动 */
#box .left{
float:left;
width:200px;
height:100%;
background-color:blue;
}
/* overflow让盒⼦独⽴出来，触动BFC，这⾥不设置overflow:hidden;的话他的宽就是100%了，但是我需要让他把左边的盒⼦的宽度空出来 */
#box .con{
overflow:hidden;
height:100%;
background-color:pink;
}
/* 这⾥不能设置浮动，只能是定位，因为中间的那个盒⼦没有浮动，所以中间的那个盒⼦会占据位置，只能⽤定位来做。

*/
#box .right{
position:absolute;
right:0;
top:0;
width:200px;
height:100%;
background-color:#000;
}
</style>
</head>
<body>
<div id="box">
<div class="left"></div>
<div class="con"></div>
<div class="right"></div>
</div>
</body>
</html>
。