左侧定宽右侧自适应布局简单介绍一下
2017-08-23 本文已影响0人
海上钢琴师TD1900
本文简单说明一下左侧定宽右侧自适应的实现方法和页面效果展现。
Html部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container"> //父元素
<div class="left"></div> //左侧定宽部分
<div class="right"></div> //右侧自适应部分
</div>
</body>
</html>
CSS样式部分
<style>
*{margin:0;padding:0;}
body{width:100%;height:100%;background: #ccc;}
.container{
width:90%;min-height:400px;background:#fff;
overflow: hidden;
}
/*
左侧定宽部分这里我用了绝对定位，让它脱离了文档流单独在左边，
不然右侧的自适应部分会被顶下去，这个你可以去掉position：absolute试试效果
*/
.left{
width:200px;height:400px;background:red;position:absolute;
}
/*
右侧自适应部分要设个左边距margin-left，而且要将宽设置成100%，不然就没宽
*/
.right{
height:400px;width:100%;margin-left:200px;background:green;float:left;
}
</style>
