首页 > 代码库 > 中间固定两侧自适应三栏布局
中间固定两侧自适应三栏布局
上一种布局“中间自适应两侧固定” 用了三种方法去解决，这一种是不常见的布局格式，来看下解决方法，先看简单的解决
第一种：绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{ height: 100%; padding: 0; margin:0;}
div{ height: 100%;}
.main{ width: 500px; background: yellow; position: absolute; top: 0; left: 50%; margin-left: -250px; z-index: 5;}
.left,.right{ position: absolute; width: 50%; left: 0; z-index: 2; background: black;}
.right{ position: absolute; width: 50%; right: 0; z-index: 2; background: black;}
</style>
</head>
<body>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</body>
</html>
很easy解决
第二种：浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{ height: 100%; padding: 0; margin: 0;}
div{ height: 100%;}
.left,.right{ width: 50%; float: left; margin-left: -250px; background: blue;}
.main{ width: 500px; float: left; background: yellow;}
.right .inner,.left .inner{ margin-left: 250px; background: #000; }
</style>
</head>
<body>
<div class="left">
<div class="inner">this is left sidebar content</div>
</div>
<div class="main">
</div>
<div class="right">
<div class="inner">this is right siderbar content</div>
</div>
</body>
</html>
中间main的 宽度固定后，然后让其做浮动 ，关键地是在左右边栏设置地方，这种方法是将其都进行50%的宽度设置，并加上中负的左边距，再在左右边栏的内层div.inner将其要显示的地方拉回来，就ok了
第三种：css3的flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
.grid{
display:-webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex
}
.col{ padding: 30px;}
.fluid{ flex:1; background: #000;}
.main{ width: 400px; background: yellow;}
</style>
</head>
<body>
<div class="grid">
<div class="col fluid">
</div>
<div class="col main">
</div>
<div class="col fluid">
</div>
</div>
</body>
</html>
当然这个牛逼的属性 在浏览器里的支持情况是让人头疼的，下面几个博文准备研究下这个属性
中间固定两侧自适应三栏布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。