使用 :after伪元素撑开 div

最新推荐文章于 2022-08-05 15:50:36 发布

weixin_30715523

最新推荐文章于 2022-08-05 15:50:36 发布

阅读量373

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/npk19195global/p/4474914.html

本文详细介绍了如何使用CSS伪元素：after，通过设置特定样式撑开div，实现页面布局的灵活调整。通过实例演示，展示了如何在不改变原有布局的情况下，动态调整div元素的大小和位置，提升网页设计的灵活性。

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

使用 :after伪元素撑开 div，

<html>
<head><style type="text/css">
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
</style>
</head>
<body>
    <div class="clearfix" style="padding:1px 1px 1px 1px; border: 1px solid red; width:200px;">
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    </div>
</body>
</html>