javascript - 使用 Javascript 和 CSS 从左到右对齐

Question

我有这行 javascript，它创建了一个商店位置列表，并在 map 下方创建了一个 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给 children 和一个width的 33%为他们。不要忘记使用 clear之后。