Question

我有一个非常简单的布局。

$.ajax({
    type: "get",
    url: "./someUrl"
}).done(function(data){

    var url = $('meta[name="base_url"]').attr('content');

    if(data) {
        $.get(url + data)
            .done(function() {
                $('#imageTwo').attr('src', '');
                $('#imageTwo').attr('src', url + data);
                $('#imageTwo').css('display', 'inline');
            }).fail(function() {
                $('#imageTwo').css('display', 'none');
            });
    }
});

现在动态添加图像。大多数情况下，只显示imageOne。这样工作正常，图像宽度为100％容器。 ImageTwo仅与imageOne一起显示，从不单独显示。为了获得图像，我选择了一些框，当选择它们时，进行Ajax调用。

interrupt-controller@f8f01000 {
    compatible = "arm,cortex-a9-gic";
    #interrupt-cells = <0x3>;
    interrupt-controller;
    reg = <0xf8f01000 0x1000 0xf8f00100 0x100>;
    num_cpus = <0x2>;
    num_interrupts = <0x60>;
    linux,phandle = <0x3>;
    phandle = <0x3>;
};

这就是Ajax对imageTwo的调用（剥离东西以便于查看）。我想要做的就是这个。如果 imageTwo已添加，我不希望它放在imageOne下面。相反，我需要它除了imageOne，我希望它们扩展到容器之外，所以滚动条将添加到浏览器中。

我一直试图将它们显示为内联，浮动等等，但似乎没有任何效果。如何在容器外面并排获取它们？

JSFiddle

由于

Answer 1

我认为这可能是您之后的布局：

https://jsfiddle.net/z69w9u4g/86/

添加另一个叫做你喜欢的div（我称之为＆＃39; special＆＃39;）并将你的图像放在那里。然后添加这个css。

.special {
    overflow: auto;
    white-space: nowrap;
}

.special > img {
    display: inline-block;
}

只需添加＆＃39;特殊＆＃39;当有两个图像时，通过你的js对div进行分类，我认为应该完成这项工作。如果不让我知道，我会尝试将其他东西排序。

在容器外并排显示两个图像

1 个答案: