[分享]css不规则的图片排版

在网页设计中，不规则的图片排版是一种很常见的技巧，可以给网页增色不少。而实现这种效果，最常用的工具就是CSS。CSS不规则的图片排版，简单来说就是利用CSS的各种布局属性将图片排列在指定的位置。没错，...

在网页设计中，不规则的图片排版是一种很常见的技巧，可以给网页增色不少。而实现这种效果，最常用的工具就是CSS。

CSS不规则的图片排版，简单来说就是利用CSS的各种布局属性将图片排列在指定的位置。没错，这并不需要使用任何JavaScript或其他编程语言，只需要熟悉CSS及其各种属性，就可以轻松实现。

其中，最常用的属性是float。通过float属性，可以将任意的元素排列在网页的左侧或右侧，形成一种类似于文章杂志的排版效果。比如下面这个例子：

 <div class="container">
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
        <div class="item item4"></div>
    </div>

    .container {
        width: 900px;
    }

    .item {
        width: 400px;
        height: 300px;
        margin-bottom: 50px;
        border-radius: 20px;
        float: left;
    }

    .item1 {
        background-color: #FFB6C1;
    }
    .item2 {
        background-color: #FFA07A;
    }
    .item3 {
        background-color: #98FB98;
    }
    .item4 {
        background-color: #87CEFA;
    } 

上面的代码中，我们定义了一个名为container的div容器，容器内有4个大小相同的div子元素，宽400，高300。四个子元素通过float:left属性将它们排在了同一行中。最后再给每个子元素个性化的颜色，文件就完成了。

当然，这个只是最基础的一种方法。如果你要实现更加复杂的不规则排版，还可以使用其他的CSS属性，诸如position、display等等。通过巧妙地组合这些属性，你会获得更加绚丽的排版效果。

总之，CSS不规则的图片排版，是网页设计中不可或缺的一个技巧。如果你还没有学会，赶紧开始学习吧！