在网格中排列图像 [英] Arrange images in a grid

问题描述

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

I am looking for a clean way to arrange images like the following example:

我尝试了一些方法，但没有任何方法可以帮助我。我已经尝试过 float：left 和 float：对于，对于较大的那些没有任何成功。 position：absolute 当然有效，但不实用，因为画廊可以出现在多个位置。

I've tried some ways, but nothing worked for me. I've tried float:left and float: right for the bigger ones without any success. position:absolute worked of course, but is not practicable because the galleries can appear at multiple positions.

推荐答案

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

I would actually just use float. see images are inline element you could float the big ones to right \ left and have the other images surrounding them: 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

You have to calculate some widths calculations:

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

big-image-width ÷ small-image-width = big-image-height ÷ small-image-height

在上面的例子中，它是6. 6 * 2 = 12 并且你为边缘。
所以每个部分都有一张大图和13个较小的图片。

In the above case it's 6. 6 * 2 = 12 and you add one for the edge. So one big picture and 13 smaller ones for each section.

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

but after that it's a smooth sail.

这篇关于在网格中排列图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！