使用Javascript和CSS左右对齐

Question

我有这行javascript，可创建商店位置列表，并在地图下方创建DIV。 这些项目从上到下显示在页面上。

我想将这些项目显示为连续3个，从左到右，从上到下。

函数是这样的：

function createSidebarEntry(marker, name, address, city, state, zipcode, telephone, images, url) {
    var div = document.createElement('div');
    var html = "<p><a href='http://" + url + "'>" + name + "</a><br/>" + address + "<br/>" + city + ", " + state + " " + zipcode + "<br/>" + (formatPhone(telephone)) + "</p>";
    div.innerHTML = html;
    div.style.marginBottom = '5px'; 
    return div;
}

作为补充问题，表格是首选方法吗？ 我试图将DIV设置为：

#sidebar {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width:665px;
    font-size:10pt;
    font-family:Arial;
    color:#656668;
    display: table-cell;
}

不幸的是，在利用利润率等工作之后，我似乎运气不佳。 有没有人能够使用动态返回的数据并使用CSS在三列中应用格式？ 我一直在谷歌搜索，看到的一切都指向我在DIV容器中创建三个列样式。

Answer 1

尝试将父元素设置为固定width然后将float应用于子元素，并将其width为33% 。 不要忘了以后使用一个clear 。

Answer 2

我建议用jquery创建您的元素。 它更容易，更优雅。

但问题的根源在于您需要添加一个float:left; 您的div风格。 这会将所有div放在同一行中。

哦，请尝试使用尽可能少的表格来布局页面上的元素。 Divs和CSS是必经之路。