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

最新推荐文章于 2023-02-16 15:18:06 发布

原创最新推荐文章于 2023-02-16 15:18:06 发布 · 3.7k 阅读

10 ·

CC 4.0 BY-SA版权

本文通过对比分析，展示了在HTML网页中使用CSS的float属性前后的布局变化。详细解释了float属性如何使元素脱离标准文档流，实现水平排列，对网页布局设计具有重要作用。

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

在这里要用到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>