完成两个div的左右布局，其中第一个div的宽度为200px，第二个div的宽度设置为剩余的宽度。
1、在不考虑ie低版本的兼容性的前提下，是可以使用弹性盒子来完成的。
<div style="width: 100%;display:-webkit-box;display: -moz-box; margin-top:20px ;">
<div class="boxone" style="width:200px;height: 100px;background: red; ">1</div>
<div class="boxtwo" style="-webkit-box-flex:1;-moz-box-flex: 1; height: 100px;background: green; ">2</div>
</div>
2、在考虑到兼容性的问题的时候可以使用加边界的方式来处理该问题。
<style>
*{
box-sizing: border-box;
}
</style>
</head>
<body style="margin: 0px; ">
<div style="width: 100%;">
<div style="width: 200px;height:100px;position:absolute; top 0; background: red; ">red</div>
<div style="width: 100%;padding-left: 200px; height:100px; background-color: green;">
</div>
</body>
首先，第一个div采用absolute定位来跳出文档流，这样第二个div就会出现浮动。这时候把第二个div的宽度设置为100%。
为了保证宽度包括了内边距和边框的宽度。添加盒子模型 box-sizing: border-box;
再次强调：！！！盒子模型不包括外边距。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
box-sizing: border-box;
}
</style>
</head>
<body style="margin: 0px; ">
<div style="width: 100%;">
<div style="width: 200px;height:100px;position:absolute; top 0; background: red; ">red</div>
<div style="width: 100%;padding-left: 200px; height:100px; background-color: green;">
</div>
</div>
<div style="width: 100%;display:-webkit-box;display: -moz-box; margin-top:20px ;">
<div class="boxone" style="width:200px;height: 100px;background: red; ">1</div>
<div class="boxtwo" style="-webkit-box-flex:1;-moz-box-flex: 1; height: 100px;background: green; ">2</div>
</div>
</div>
</body>
<script>
</script>
</html>
扫一扫
1819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
