css - 在网格中排列图像

Question

我正在寻找一种干净的方式来排列图像，如下例所示：

我尝试了一些方法，但对我没有任何效果。我已经尝试过float:left更大float: right的，但没有任何成功。position:absolute当然可以，但不可行，因为画廊可以出现在多个位置。

Answer 1

我实际上只是使用浮动。看到图像是内联元素，您可以将大的浮动到右 \ 左并让其他图像围绕它们： CSS：

.small{
        width:100px;
        float:right;
    }
    .left{
        float:left;
    }
    .right{
     float:right;   
    }

HTML：

<img src="http://www.just4cats.org/images/cats_012.jpg" class="left" height="450" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" /><img src="http://www.just4cats.org/images/cats_012.jpg" class="small" />

演示

您必须计算一些宽度计算：

大图像宽度÷小图像宽度=大图像高度÷小图像高度

在上述情况下，它是 6。6 * 2 = 12并且您为边缘添加了一个。因此，每个部分有一张大图和 13 张小图。

但在那之后它是一帆风顺的。

Answer 2

除了浮动，尝试使用一些宽度百分比。

/* For larger images */
larger {
    width: 66.66666666%;
}

/* For smaller ones */
smaller {
    width: 33.333333333%;
}

Answer 3

这是我完美的简单尝试

CSS：

.wrap {
    height:auto;
    width:150px;
    overflow:hidden;
}
.relef {
   position: relative;
   float: left;
}
.relri {
   position: relative;
   float: right;
}
    .segment {
        width:150px;
        height:100px;
    }
    .row {
        height:50px;
        width:150px;
    }

    .box{
        height:46px;
        width:46px;
        margin:2px;
        background-color:black;
    }
.bigbox {
    height:96px;
    width:96px;
    margin:2px;
    background-color: red;
}

和 html，你可以随意循环它

        <div class="wrap">
            <div class="segment relef">
                <div class="bigbox relef"></div>
                <div class="box relef"></div>
                <div class="box relef"></div> 
            </div>
            <div class="row relef">
                <div class="box relef"></div>
                <div class="box relef"></div>
                <div class="box relef"></div>
            </div>
            <div class="segment relri">
                <div class="bigbox relri"></div>
                <div class="box relef"></div>
                <div class="box relef"></div> 
            </div>
            <div class="row relef">
                <div class="box relef"></div>
                <div class="box relef"></div>
                <div class="box relef"></div>
            </div>
            <div class="segment relef">
                <div class="bigbox relef"></div>
                <div class="box relef"></div>
                <div class="box relef"></div> 
            </div>
                <div class="row relef">
                <div class="box relef"></div>
                <div class="box relef"></div>
                <div class="box relef"></div>
            </div>
            <div class="segment relri">
                <div class="bigbox relri"></div>
                <div class="box relef"></div>
                <div class="box relef"></div> 
            </div>
                <div class="row relef">
                <div class="box relef"></div>
                <div class="box relef"></div>
                <div class="box relef"></div>
            </div>
        </div>

演示 http://jsfiddle.net/jw8dh/3/

如果你所有的图像都是正方形的，你可以简单地用宽度：100% 和高度：100% 的图像填充 .box 和 .bigbox