Javascript CSS和Jquery使用一个DIV创建3列_Javascript_Jquery_Css

Javascript CSS和Jquery使用一个DIV创建3列

javascript jquery css

Javascript CSS和Jquery使用一个DIV创建3列,javascript,jquery,css,Javascript,Jquery,Css,我的问题是关于带有Jquery的CSS，它将创建从左到右、从上到下的三列。目前，所有数据都放在一列中以下是jquery： function smartColumns() { $("ul.column").css({ 'width' : "100%"}); var colWrap = $("ul.column").width(); var colNum = Math.floor(colWrap / 200); var colFixed = Math.floor(colWrap / colNum

我的问题是关于带有Jquery的CSS，它将创建从左到右、从上到下的三列。目前，所有数据都放在一列中

以下是jquery：

function smartColumns() { 
$("ul.column").css({ 'width' : "100%"});
var colWrap = $("ul.column").width();
var colNum = Math.floor(colWrap / 200);
var colFixed = Math.floor(colWrap / colNum);
$("ul.column").css({ 'width' : colWrap});
$("ul.column li").css({ 'width' : colFixed});
}   
smartColumns();
$(window).resize(function () {
smartColumns();
});

下面是javascript函数，它创建数据，并在函数下面列出的名为sidbar的div中输出数据：

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

<html>
<div id="sidebar"></div>
</html>

其目标是在665px范围内创建3列，并让数据从左到右，然后从上到下填充段落。然而，目前的情况是，段落都放在左侧的一列中，数据从上到下填充在一列中

谢谢

我认为您的样式是正确的，但是在

html

变量中只创建了一个

li

，所以您只得到一列

如果您将字段分为三个

li

s，据我所知它是有效的。您可以在以下位置看到一个示例：

这就是你想要的吗

编辑：

我想我现在明白了。这就是你想要的吗？

我相信我改变的主要是ul上的设置-在ul上设置浮动：

ul.column {
    width: 100%;
    padding: 0;
    margin: 10px 0;
    list-style: none;
    float: left;
}

然后将jQuery生成的CSS规则设置为200px而不是100%，因为100%将占用整个

边栏div。我将其更改为$（“ul.column”）.CSS（{'width'：“200px”}）
我还将innerHTML
方法更改为$（'div#sidebar'）.append（html），因为这对我不起作用，至少在我的测试中是这样，我只调用了六次函数，这样你就可以看到显示的列append
将html添加到上一个条目中，而不是覆盖它。不过，您可能会以不同的方式调用该函数
只是为了我自己的测试，我取出了formatPhone（）
函数，因为我假设它是在代码中的其他地方定义的，但是抛出了一个错误，因为我没有访问它的权限：）。如果需要的话，你可以把它放在里面。嗨，谢谢你的回复。我所关注的是一个段落中的所有数据，如下所示：所有html数据都在一个段落中，下一个记录集将在第2列中包含所有html数据，然后在第3列中包含所有html数据。然后下一个记录集将移回第一个记录下的第1列，并创建一个新的记录集。。。我知道我现在很清楚…我为我的ramblingHi道歉，我更新了我的答案-希望，这就是你想要的。哇。。。这正是我要找的！我知道你很忙，但如果你能花一分钟来解释我做错了什么，我当然想知道我做错了什么，顺便说一句，非常感谢你抽出一天的时间来帮助解决meNo问题-我会在答案中添加一些评论，因为这样更容易理解。如果您也不介意将我的答案标记为已接受，这将帮助我和其他任何人知道这是解决方案。
ul.column {
    width: 100%;
    padding: 0;
    margin: 10px 0;
    list-style: none;
    float: left;
}