如何让网页的图片以块的形式从左到右排列

最新推荐文章于 2023-04-21 23:11:43 发布

Bravo！！！

最新推荐文章于 2023-04-21 23:11:43 发布

阅读量3.5k

点赞数 3

本文链接：https://blog.csdn.net/weixin_47982238/article/details/107582235

版权

在这里要用到CSS样式中的float

先看一下原网页代码及展示效果

<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        .img{
            background: #f00;
            width: 200px;
            height: 200px;
            margin: 5px;
        }

    </style>
</head>
<body>
    <div class="row">
        <div class="img">
            <img src="b.png" class="img1">
        </div>
        <div class="img">
            <img src="b.png" class="img1">
        </div>
        <div class="img">
            <img src="b.png" class="img1">
        </div>
        <div class="img">
            <img src="b.png" class="img1">
        </div>
    </div>
</body>
</html>

再看一下加上float的效果

<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        .img{
            background: #f00;
            width: 200px;
            height: 200px;
            margin: 5px;
            float: left;/*关键语句*/
        }

    </style>
</head>
<body>
    <div class="row">
        <div class="img">
            <img src="b.png" class="img1">
        </div>
        <div class="img">
            <img src="b.png" class="img1">
        </div>
        <div class="img">
            <img src="b.png" class="img1">
        </div>
        <div class="img">
            <img src="b.png" class="img1">
        </div>
    </div>
</body>
</html>