javascript - 你如何布局 DIV 的列？ (或者，我做错了什么)

Question

好的，首先，我是新手，所以要温柔(请)。我正在尝试布局多列 div。每个 div 包含多个垂直堆叠的图像。图片都是一样大的。这是我使用 jQuery 得出的结论:

var $columns= $('<div />', {
    css: {
        align: 'center', position: 'absolute',
        height: 125, width: '100%', left: 0, top: 355, zIndex: 10
    },
    id: 'columns',
    text: 'Towers'
}).appendTo('#mainDiv');

for (var c = 0; c < 6; ++c) {
    var $c = $('<div />', {
        css: {
            marginLeft: 5, marginRight: 5,
            textAlign: 'center',
            top: 20, width: 20, zIndex: 20
        },
        id: 'c' + c
    });

    for (var i = 0; i < 8; ++i) {
        $c.append($('<img />', {
            css: {
                marginBottom: 0, zIndex: 30
            },
            id: 'c' + c + 'i' + i,
            src: 'image' + c + '.png'
        }));
    }

    $columns.append($c);
}

每张图片都是 17x11 像素。当我运行它时，我得到 6 列，其中 8 个图像垂直堆叠。但是，这些列都在一个列中。我想要他们并排。这是完全错误的方法还是我至少接近了。

额外功劳:如何通过从上到下 4px 使图像相互重叠？

Answer 1

A <div>是一个 block 元素，所以它有 display:block默认情况下;这意味着它和它的父级一样宽，除非你给它指定一个特定的宽度。我想你想做的是使用 inline-block与 $c :

var $c = $('<div />', {
    css: {
        display: 'inline-block',
        marginLeft: 5, marginRight: 5,
        textAlign: 'center',
        zIndex: 20
    },
    id: 'c' + c
});

设置top不会为您做任何事情，因为您没有指定 position .如果图像是 17x11，那么您应该这样说:

$c.append($('<img />', {
    css: {
        marginBottom: 0, zIndex: 30
    },
    id: 'c' + c + 'i' + i,
    src: 'image' + c + '.png',
    width: 17,
    height: 11
}));

如果你想要一点重叠，那么设置一个负的上边距将它们向上推一点并设置 display: block在图像上。

http://jsfiddle.net/ambiguous/949ey/