HTML5 流布局

最新推荐文章于 2023-11-20 15:24:50 发布

原创最新推荐文章于 2023-11-20 15:24:50 发布 · 518 阅读

1 ·

CC 4.0 BY-SA版权

UI 同时被 2 个专栏收录

8 篇文章

订阅专栏

极客学院-HTML5

2 篇文章

订阅专栏

本文介绍了一个使用HTML5和CSS实现的图片流式布局案例。通过定义.container类的列宽和间隙，使得大量图片能够均匀分布并自适应浏览器窗口大小。

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

HTML5

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="05ApplyStyle.css">
</head>
<body>
    <div class="container">
        <div><img src="image/1.jpg" width="250">
            <p>这里添加标签</p>
        </div>
        <div><img src="image/2.jpg" width="250"></div>
        <div><img src="image/3.jpg" width="250">
            <p>这里添加标签</p>
        </div>
        <div><img src="image/4.jpg" width="250"></div>
        <div><img src="image/5.jpg" width="250"></div>
        <div><img src="image/6.jpg" width="250"></div>
        <div><img src="image/7.jpg" width="250"></div>
        <div><img src="image/8.jpg" width="250"></div>
        <div><img src="image/9.jpg" width="250"></div>
        <div><img src="image/10.jpg" width="250"></div>
        <div><img src="image/11.jpg" width="250"></div>
        <div><img src="image/1.jpg" width="250"></div>
        <div><img src="image/2.jpg" width="250">
            <p>这里添加标签</p>
        </div>
        <div><img src="image/3.jpg" width="250"></div>
        <div><img src="image/4.jpg" width="250"></div>
        <div><img src="image/5.jpg" width="250"></div>
        <div><img src="image/6.jpg" width="250"></div>
        <div><img src="image/7.jpg" width="250"></div>
        <div><img src="image/8.jpg" width="250"></div>
        <div><img src="image/9.jpg" width="250"></div>
        <div><img src="image/10.jpg" width="250"></div>
        <div><img src="image/11.jpg" width="250"></div>
        <div><img src="image/1.jpg" width="250"></div>
        <div><img src="image/2.jpg" width="250"></div>
        <div><img src="image/3.jpg" width="250"></div>
        <div><img src="image/4.jpg" width="250"></div>
        <div><img src="image/5.jpg" width="250"></div>
        <div><img src="image/6.jpg" width="250"></div>
        <div><img src="image/7.jpg" width="250"></div>
        <div><img src="image/8.jpg" width="250"></div>
        <div><img src="image/9.jpg" width="250"></div>
        <div><img src="image/10.jpg" width="250"></div>
        <div><img src="image/11.jpg" width="250"></div>
        <div><img src="image/1.jpg" width="250"></div>
        <div><img src="image/2.jpg" width="250"></div>
        <div><img src="image/3.jpg" width="250"></div>
        <div><img src="image/4.jpg" width="250"></div>
        <div><img src="image/5.jpg" width="250"></div>
        <div><img src="image/6.jpg" width="250"></div>
        <div><img src="image/7.jpg" width="250"></div>
        <div><img src="image/8.jpg" width="250"></div>
        <div><img src="image/9.jpg" width="250"></div>
        <div><img src="image/10.jpg" width="250"></div>
    </div>
</body>
</html>

CSS

<span style="font-size:14px;">.container{
    -webkit-column-width: 250px;
    column-width: 250px;
    -webkit-column-gap: 5px;
    column-gap: 5px;
}
.container div{
    width: 250px;
    margin: 5px 0px;
}
.container p{
    text-align: center;
}</span>

样式