css如何实现不规则图片墙布局如图

html-css026

css如何实现不规则图片墙布局如图,第1张

用四个div浮动,然后每个div里放几张图片<div >

<div style="float:left">

<div>图片<div>

<div>图片<div>

<div>图片<div>

<div>图片<div>

</div>

<div style="float:left">

<div>图片<div>

<div>图片<div>

<div>图片<div>

<div>图片<div>

</div>

<div style="float:left">

<div>图片<div>

<div>图片<div>

<div>图片<div>

<div>图片<div>

</div>

<div style="float:left">

<div>图片<div>

<div>图片<div>

<div>图片<div>

<div>图片<div>

</div>

</div>

百度:css3 变形(低版本ie和少部分浏览器不支持)

低版本ie的实现:

先把图片在ps里面拉斜做影子后存为:png24+背景透明格式,然后网页里面用cssz-index控制层级上下关系,并用定位摆放到合适的位置。另外你还要修正一下ie6的png24背景不透明的问题。

然后,你给那三个猫咪图片每张一个id:

<img src="aaa.jpg" id="cat1" />

<img src="bbb.jpg" id="cat2" />

<img src="ccc.jpg" id="cat3" />

#cat1,#cat2,#cat3{position:absolute}/*绝对定位*/

#cat1{

left:300pxtop:80px

z-index:10

}

#cat2{

left:50pxtop:320px

z-index:9

}

#cat3{

left:300pxtop:80px

z-index:8

}

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>TEST</title>

    <style>

        .grid {

            display: table

            transform:rotate(-45deg)

            margin: 0 auto

        }

        .grid > .grid-tr {

            display: table-row

        }

        .grid > .grid-tr > .grid-td {

            display: table-cell

            width: 120px

            height: 120px

            border: 2px solid rgba(255,255,255,1)

            background-color: aqua

        }

    </style>

</head>

<body>

    <div class="grid">

        <div class="grid-tr">

            <div class="grid-td"></div>

        </div>

        <div class="grid-tr">

            <div class="grid-td"></div>

            <div class="grid-td"></div>

        </div>

        <div class="grid-tr">

            <div class="grid-td"></div>

            <div class="grid-td"></div>

            <div class="grid-td"></div>

        </div>

        <div class="grid-tr">

            <div class="grid-td"></div>

            <div class="grid-td"></div>

            <div class="grid-td"></div>

            <div class="grid-td"></div>

        </div>

    </div>

</body>

</html>

想放图片的话直接将 img标签放到  grid-td的div里面去。

思路很简单,看似不规则的排列实际是规则的,与其一个一个将div旋转,不如放入一个容器里面排列好,然后旋转了-45° 。