HTML5 流布局

最新推荐文章于 2023-03-30 11:11:43 发布

Yliuhan

最新推荐文章于 2023-03-30 11:11:43 发布

阅读量476

点赞数

分类专栏：极客学院-HTML5 UI

本文链接：https://blog.csdn.net/u011123339/article/details/43085225

版权

UI 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

极客学院-HTML5

2 篇文章 0 订阅

订阅专栏

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>

样式