父级div宽度100%,子级一个div宽度固定，另一个宽度自适应

时间：2018-06-12 23:31:03 阅读：293 评论：0 收藏：0 [点我收藏+]

标签：ack doctype osi back body col AC src doc

<!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宽度固定，另一个宽度自适应

标签：ack doctype osi back body col AC src doc

原文地址：https://www.cnblogs.com/yuwen1995/p/9175527.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行