将图像正确放置在导轨上答案

【问题标题】：Get the image to be placed right ruby on rails将图像正确放置在导轨上
【发布时间】：2010-11-27 22:49:57
【问题描述】：

我目前正在为朋友开发一个小型照片 cms，她使用 Flickr，以便我用来获取图像，或者我使用名为 Flickraw 的 gem。我必须以某种方式知道图像何时是三个中的第三个，以及三个中的第二个，等等。这是一个截图，说明了它的作用。（抱歉是丹麦语）

所以基本上我希望中间图像在中间，从左到左，从右到右。我有 8 行 .. 它是动态的。

谢谢！

PS。我尽可能不使用表格。

【问题讨论】：

这些图像是否在任何类型的容器中（div、li 等）？

标签： html css image frontend

【解决方案1】：

这是我的建议。

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/

如果您无法控制图像和添加类名。如果您确实有控制权，那么使用类名代替 nth-child 会更安全。

【讨论】：

嘿，谢谢！但是..我在图片下面有一些文字..女巫应该直接放在下面..

【解决方案2】：

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

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

【讨论】：