您的位置：首页 > Web前端 > CSS

右边定宽，左边自适应css布局总结（三种方案）

2017-11-19 16:37 363 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>右边定宽，左边自适应布局</title>
<style type="text/css">
/* 注意清除浮动 */
.container{height: 200px;overflow: hidden;position: relative;}

/* 方案一：左边左浮动，右边右浮动，同时左边margin-left为负值 */
.left{float:left;width:100%;height:300px;margin-right:-200px;background-color: red;}
.right{float: right;width:200px;height:300px;background-color: blue;}

/* 方案二：父元素相对定位,左右分别绝对定位 */
/*.left{ position: absolute; top:0; left:0;right:200px; width: 100% ;height:300px;background: red;}
.right{ position: absolute; top:0; right:0px; width:200px; height:300px;background: blue;}*/

/*方案三：父元素相对定位,右边绝对定位，左边margin-right */
/*.left{margin-right:200px;height:300px;background-color: red;}
.right{position: absolute;top:0px;right: 0px;width:200px;height:300px;background-color: blue;}*/

.footer{background-color: green;}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css布局

相关文章推荐

新的分享

章节导航