将图像放置在轨道上的右侧红宝石上

Question

我正在为朋友开发一个小型照片cms，她使用Flickr，这样我用来获取图像，或者我使用一个名为Flickraw的宝石。我必须以某种方式知道图像是三分之一的连续三分之一，三分之二，依此类推。这是一个截图，说明了它的作用。 （抱歉是丹麦语）

所以我基本上希望中间图像位于中间，左侧是左侧，右侧是右侧。我喜欢8行..它是动态的。

谢谢！

PS。我尽可能不使用桌子。

Answer 1

您正在动态创建页面，因此您可以让每个第一张图片的HTML元素都为class="first"，每秒class="second"，每三分之一class="third"。

然后，您可以使用CSS为每个定义float和clear布局规则。

Answer 2

这是我的建议。

<强> HTML

<div class="photo-row">
    <div class="photo">Left</div><div class="photo">Center</div><div class="photo">Right</div>
</div>

CSS

.photo-row .photo {
    background-color: rgb(230,230,230);
    display: inline-block;
    vertical-align: middle;
    width: 33.33%
}
.photo-row .photo:nth-child(1) { text-align: left; }
.photo-row .photo:nth-child(2) { text-align: center; }
.photo-row .photo:nth-child(3) { text-align: right; }

示例：http://jsfiddle.net/xYZjL/

如果您无法控制图像并添加类名，那就是这样。如果你有控制权，你可以更安全地使用类名代替n-child。