Javascript 如何布局div的列？（或者，我做错了什么）

好的，首先，我是新手，所以请温柔一点。我正在尝试布局多个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);
}

var$columns=$（“”{
css:{
对齐：“中心”，位置：“绝对”，
高度：125，宽度：“100%”，左侧：0，顶部：355，zIndex:10
},
id:'列'，
文字：“塔楼”
}).appendTo（'mainDiv'）；
对于（var c=0；c<6；++c）{
变量$c=$（“”{
css:{
边缘左：5，边缘右：5，
textAlign:'中心'，
顶部：20，宽度：20，锌指数：20
},
id:'c'+c
});
对于（变量i=0；i<8；++i）{
$c.append（$（'
每个图像都是17x11px。当我运行此操作时，我得到6列，其中8个图像垂直堆叠。但是，这些列都在一列中。我希望它们并排排列。这是完全错误的方式还是至少我接近了

额外提示：如何让图像从上到下重叠4px？
你得到的奇怪解决方案，我在喜欢和讨厌之间左右为难。尽管如此，如果不给你的内部div一个position属性，它们将默认为
static
，而top/left不会做任何事情

此外，CSS定位背后的思想是，外部元素具有相对位置，内部元素具有绝对位置。这些内部元素将具有相对于父div的绝对位置，且位置为：相对

var $columns= $('<div />', {
    css: {
        align: 'center', position: 'relative',
        height: 125, width: '100%', left: 0, top: 0, 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',
            position: 'absolute', top: 20, left:15*c, 
            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);
}

下面是一个例子。你得到了一个奇怪的解决方案，我在喜欢和讨厌之间左右为难。但是，如果不给你的内部div一个position属性，它们将默认为
static
，top/left不会做任何事情

此外，CSS定位背后的思想是，外部元素具有相对位置，内部元素具有绝对位置。这些内部元素将具有相对于父div的绝对位置，且位置为：相对

var $columns= $('<div />', {
    css: {
        align: 'center', position: 'relative',
        height: 125, width: '100%', left: 0, top: 0, 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',
            position: 'absolute', top: 20, left:15*c, 
            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);
}

下面是一个关于的示例。A
是一个块元素，因此默认情况下它有
显示：block
；这意味着它与其父元素一样宽，除非您为其指定特定的宽度。我想您要做的是将
内联块
与
$c
一起使用：

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

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

A
是一个块元素，因此默认情况下，它具有
显示：块
；这意味着它与其父元素一样宽，除非您为其指定特定的宽度。我想您要做的是将
内联块
与
$c
一起使用：

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

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

我建议在
divs
上使用class，而不是像这样生成css。我相信你可以让图像上下重叠一个负边距。这并不总是最好的主意，我看到它做了一些奇怪的事情。尽管我会在
上使用class来替代绝对定位图像，但我建议在
上使用class>divs
而不是像这样生成css。我相信你可以让图像与负边距的上/下重叠。这并不总是最好的主意，我看到它做了一些奇怪的事情。尽管我会加入一个绝对定位图像的替代方案，你需要支持哪些浏览器？#Esteban-我会说现在回到IE6什么您需要支持哪些浏览器？#Esteban-我想说，现在回到IE6thanks，这对我来说效果最好，因为我不知道我将拥有多少列，我希望它们集中在mainDiv中（尽管这是另一个问题）@Dave：你也应该接受Phelios的建议，在你的元素上使用类，而不是所有的内联CSS：更干净、更标准的代码。Phelios：好建议。我认为用这种方式原型化更快（至少对我来说）但我计划在它工作后将其全部转换为CSS类谢谢，这对我来说效果最好，因为我不知道将有多少列，我希望它们集中在mainDiv中（尽管这是另一个问题）@Dave：你也应该接受Phelios的建议，在你的元素上使用类，而不是所有的内联CSS：更干净、更标准的代码。Phelios：好建议。我认为用这种方式原型化更快（至少对我来说），但我计划一旦成功，就把这些都转换成CSS类