<!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布局总结（三种方案）
最新推荐文章于 2022-07-26 10:33:18 发布
1412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
