如何实现外层div固定内层div随内容大小适应

一、问题

  • 如何实现外层div固定内层div随内容大小适应
  • 外层父级div宽高固定
  • 内层子级div不能继承父级的宽高

二、方案

  • 给自己的div及内容设置 display: inline-block

三、代码,拷贝浏览器查看效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>如何实现外层div固定内层div随内容大小适应</title>
    <style type="text/css">
        .parent {
            width: 400px;
            height: 400px;
            background-color: #ffff7f;
            padding: 20px;
        }

        .children {
            background-color: #ff00ff;
            /* 此处display: inline-block是重点,如果不加就会集成parent的宽高 */
            display: inline-block;
            padding: 20px;
        }

        .children div {
            /* 此处display: inline-block是重点,如果不加就会集成children的宽高 */
            display: inline-block;
            background-color: #5500ff;
            height: 100px;
            width: 100px;
            color: white;
        }
    </style>
</head>
<body>
<div class="parent">
    <p>parent</p>
    <div class="children">
        <p>children</p>
        <div>第一个div</div>
        <div>第一个div</div>
    </div>
</div>
</body>
</html>

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×