中间固定，两边自适应的三列布局、两边固定，中间自适应的三列布局、左侧栏固定，右侧自适应的两列布局
2016-09-20 19:38
543 查看
分享几个典型的布局，主要是因为最近找工作，这三个都是在笔试题中出现的，接下来分享一下我的实现方式
（1）中间固定，两边自适应的三列布局
<html>
<head>
<style type="text/css">
*{ margin:0; padding:0; }
/*中间固定，两边自适应*/
.middle{background-color: palegreen;position: absolute;left: 50%;margin-left: -250px; width:500px; height:100%; width:500px; }
.left{background-color: gold;position: absolute;left: 0;right: 50%;margin-right: 250px; height:100%;}
.right{background-color: firebrick;position: absolute;right: 0;left: 50%;margin-left: 250px; height:100%;}
</style>
</head>
<body>
<div class="left">qwkqjijwoqd</div><!--左-->
<div class="right">hqiu111</div><!--右-->
<div class="middle"><p>jwqjwqiodjeeeeeeee</p></div><!--中-->
</body>
</html>
运行截图：
（2）两边固定，中间自适应的三列布局
<html>
<head>
<style type="text/css">
*{ margin:0; padding:0; }
/*两边固定，中间自适应*/
.middle{ height:100%; background-color:#CC9999; margin-left:400px; margin-right:300px;}
.left{ background-color:#00FF00; height:100%; float:left; width:400px; }
.right{ background-color:#FF0000; float:right; height:100%; width:300px; }
</style>
</head>
<body>
<!--两边固定，中间自适应-->
<div class="left">
qeeeeeeeeeeeeeeeeeee
</div>
<div class="right">
qeeeeeeee
</div>
<div class="middle">
asdkhihfewi
</div>
</body>
</html>运行截图：
（3）左侧栏固定，右侧自适应的两列布局
<html>
<head>
</head>
<body>
<style type="text/css">
*{ margin:0; padding:0; }
.box{ width:800px; height:600px; }
.left{ float:left; width:200px; height:100%; background-color:red; }
.right{ width:auto; height:100%; background-color:#0f0; margin-left:-200px; }
</style>
<div class="box" >
<div class="left" ></div>
<div class="right" >wjhjfk</div>
</div>
<body>
</html>运行截图：
当然，要想实现这三种布局，有更多好的方式
（1）中间固定，两边自适应的三列布局
<html>
<head>
<style type="text/css">
*{ margin:0; padding:0; }
/*中间固定，两边自适应*/
.middle{background-color: palegreen;position: absolute;left: 50%;margin-left: -250px; width:500px; height:100%; width:500px; }
.left{background-color: gold;position: absolute;left: 0;right: 50%;margin-right: 250px; height:100%;}
.right{background-color: firebrick;position: absolute;right: 0;left: 50%;margin-left: 250px; height:100%;}
</style>
</head>
<body>
<div class="left">qwkqjijwoqd</div><!--左-->
<div class="right">hqiu111</div><!--右-->
<div class="middle"><p>jwqjwqiodjeeeeeeee</p></div><!--中-->
</body>
</html>
运行截图：
（2）两边固定，中间自适应的三列布局
<html>
<head>
<style type="text/css">
*{ margin:0; padding:0; }
/*两边固定，中间自适应*/
.middle{ height:100%; background-color:#CC9999; margin-left:400px; margin-right:300px;}
.left{ background-color:#00FF00; height:100%; float:left; width:400px; }
.right{ background-color:#FF0000; float:right; height:100%; width:300px; }
</style>
</head>
<body>
<!--两边固定，中间自适应-->
<div class="left">
qeeeeeeeeeeeeeeeeeee
</div>
<div class="right">
qeeeeeeee
</div>
<div class="middle">
asdkhihfewi
</div>
</body>
</html>运行截图：
（3）左侧栏固定，右侧自适应的两列布局
<html>
<head>
</head>
<body>
<style type="text/css">
*{ margin:0; padding:0; }
.box{ width:800px; height:600px; }
.left{ float:left; width:200px; height:100%; background-color:red; }
.right{ width:auto; height:100%; background-color:#0f0; margin-left:-200px; }
</style>
<div class="box" >
<div class="left" ></div>
<div class="right" >wjhjfk</div>
</div>
<body>
</html>运行截图：
当然，要想实现这三种布局，有更多好的方式
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐