Question

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

example of how it should look like

我尝试了一些方法，但没有任何方法可以帮助我。我已经尝试了float:left和float: right来获取较大的版本而没有任何成功。 position:absolute当然有效，但不实用，因为画廊可以出现在多个位置。

Answer 1

我实际上只是使用float。看到图像是内联元素，你可以将大的那些浮动到右边\左边，并让其他图像围绕它们：的 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" />

Demo

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

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

在上面的例子中，它是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/

如果您的所有图像都是正方形，则可以使用宽度上的图像填充.box和.bigbox：100％和高度：100％

在网格中排列图像

3 个答案:

Demo