div在内部有浮动情况下不能自动撑大的问题

最新推荐文章于 2023-05-25 13:42:46 发布

原创最新推荐文章于 2023-05-25 13:42:46 发布 · 495 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div布局

本文介绍了一个使用CSS实现的简单布局案例，通过浮动元素并结合特定样式属性，如overflow和zoom，来达到预期的视觉效果。文章通过具体代码展示了如何在一个红色背景的容器中居中显示蓝色方块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1{
                width:200px;
                height: auto;
                padding: 10px 0px;
                background: red;
                overflow:hidden;zoom:1;
                /*关键是上面这一句*/
            }
            .div2{
                width: 100px;
                height:200px;
                background: blue;
                margin: 0 auto;
                float: left;

            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2" ></div>
        </div>
    </body>
</html>