Question

我正在建立一个图库，并有水平和垂直图像。此时图像一个接一个地加载，垂直堆叠。

它适用于水平图像，但只要我在布局上有垂直图像，它就会拉伸以匹配水平图像的宽度，并且变得太高而无法适应屏幕。

我正在尝试找到一种解决方案，以便始终并排对齐2个垂直图像。

这里有一些图形来说明我想要实现的目标：

Image＆lt; - 对不起，我无法发布图片。

理想情况下，只有使用CSS的解决方案，但我不认为这是可能的。所以，我使用了一些jQuery来实现它。

$('.image-wrapper').prop('height', function(){
if($(this).height() > $(this).width()){
    //portrait, resize accordingly
    var width = $(this).width();
    var height = $(this).height();
    $(this).css({"width": "50%", "float": "left"});
});

此解决方案的唯一问题是它不考虑DIV的边距。我无法找到补偿它的方法。

以下是JSfiddle

的链接

更新：

我已经调整了jQuery来测试或者不是前一个图像是垂直的，并在它们之间添加边距。我只是想知道这个解决方案有多可靠。

这是[小提琴] [4]

的链接

作为奖励，能够检查序列中有多少垂直图像并将所有垂直图像并排放置会很棒。 ;）

谢谢！

Answer 1

选项1：

您提到您无权访问html。为了访问第n个元素的css，您可以使用nth-of-type（x）选择器。

以下是有关它的一些信息： http://www.w3schools.com/cssref/sel_nth-of-type.asp

仅使用css，添加：

.image-wrapper:nth-of-type(2),.image-wrapper:nth-of-type(3){
    float:left;
    width:50%;
    padding:0;
    margin:0;
}

并删除你的js。这应该做到。

演示：http://jsfiddle.net/dsfa2bvu/39/

选项2：

使用Jquery，在每个图像中找到“垂直”一词。找到后，添加一个样式。

以下是如何找到它：

var x = $("img[src$='vertical-img']");
x.css("float","left");

演示：http://jsfiddle.net/dsfa2bvu/40/

Answer 2

这是一个解决方案：

class Order < ActiveRecord::Base
  …
  accepts_nested_attributes_for :order_recipes
end

小提琴编辑：http://jsfiddle.net/dsfa2bvu/41/

以不同方式设置垂直图像的样式，使它们并排运行

2 个答案: