父级div宽度100%,子级一个div宽度固定，另一个宽度自适应
Posted 玉文
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了父级div宽度100%,子级一个div宽度固定，另一个宽度自适应相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<title>布局测试</title>
<style type="text/css">
/*第一种方式*/
.div-box1 {
width: 100%;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.div2 {
height: 100px;
background-color: green;
}
/*第二种方式*/
.div-box2 {
width: 100%;
position: relative;
}
.div3 {
position: absolute;
width: 200px;
height: 100px;
background-color: red;
}
.div4 {
margin-left: 200px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="div-box1">
<div class="div1">第一个盒子</div>
<div class="div2">第二个盒子</div>
</div>
<div>测试成功</div>
<div class="div-box2">
<div class="div3">第三个盒子</div>
<div class="div4">第四个盒子</div>
</div>
<div>测试成功</div>
</body>
</html>
自己只想到这两种方式，第一种是浮动，第二种为定位效果图如下：
以上是关于父级div宽度100%,子级一个div宽度固定，另一个宽度自适应的主要内容，如果未能解决你的问题，请参考以下文章