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

我的问题是关于使用Jquery的CSS，它将创建三列，从左到右，从上到下运行。目前数据全部放入一列。CSS和Jquery使用一个DIV创建3列

这里是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功能，并且输出它是在函数下面列出在一个div称为sidbar数据：

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>

这里是DIV使用的CSS：

#sidebar 
{ 
width:665px; 
font-size:10pt; 
font-family:Arial; 
color:#656668; 
} 
ul.column{ 
width: 100%; 
padding: 0; 
margin: 10px 0; 
list-style: none; 
} 
ul.column li { 
float: left; 
width: 200px; /*Set default width*/ 
padding: 0; 
margin: 5px 0; 
display: inline; 
} 
.block { 
height: 60px; 
font-size: 1em; 
margin-right: 10px; /*Creates the 10px gap between each column*/ 
padding: 0px; 
background: #FFFFFF; 
} 
.block h2 { 
font-size: 1.8em; 
} 
.block img { 
    /*Flexible image size with border*/ 
width: 89%; /*Took 1% off of the width to prevent IE6 bug*/ 
padding: 5%; 
background:#fff; 
margin: 0 auto; 
display: block; 
-ms-interpolation-mode: bicubic; /*prevents image pixelation for IE 6/7 */ 
} 
#sidebar a:link 
{ 
color:#192A96; 
font-weight:bold; 
font-size:10pt; 
font-family:Tahoma; 
text-decoration: underline; 
} 
#sidebar a:visited 
{ 
color:#192A96; 
font-weight:bold; 
font-size:10pt; 
font-family:Tahoma; 
text-decoration: underline; 
} 
#sidebar a:hover 
{ 
color:#192A96; 
font-weight:bold; 
font-size:10pt; 
font-family:Tahoma; 
text-decoration: underline; 
} 
#sidebar a:active 
{ 
color:#192A96; 
font-weight:bold; 
font-size:10pt; 
font-family:Tahoma; 
text-decoration: underline; 
}

这样做的目标是创建3个列ns，在665px之内，并且数据从左到右，然后从上到下填充段落。但是目前正在发生的事情是段落都被放置在一列左侧和数据填充从上到下一列感谢

来源

2011-08-01 matt colley

我觉得你的风格是正确的，但只有一个li正在创建在你的html变量中，所以你只能得到一列。

如果将字段拆分为三个li s，它的工作原理据我所知。你可以看到一个例子：

http://jsfiddle.net/eZPTj/1/

这是你以后在做什么？

编辑：

我想我现在就买下。这是你在追求什么？ http://jsfiddle.net/eZPTj/7/

我相信，我改变了最主要的是刚刚在UL的设置 - 设置在UL浮动：

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

然后设置了jQuery生成CSS规则为200像素，而不是100％，因为100％会占用整个sidebar股利。我把它改成$("ul.column").css({ 'width' : "200px"});

我也改变了innerHTML方法$('div#sidebar').append(html);，因为这是不工作对我来说，至少在我的测试，在这里我只是调用的函数的六倍，所以你可以看到列显示。 append将html添加到前一个条目中，而不是覆盖它。不过你可能会调用这个函数。

只是为了我自己的测试，我拿出了formatPhone()函数，因为我认为它定义在代码中的其他地方，但由于我没有访问权限而抛出错误:)。如果需要的话，你可以保留它。

来源

2011-08-01 18:58:50

嗨，感谢您的回复。我之后所有的数据都是这样的一段： –

所有的html数据都在一段中，下一个记录集将在第2列中包含所有的html数据，然后在第3列中包含所有的html数据。然后下一个记录集将移回到第一条记录下方的第一列，并创建一个新的记录集...我知道我现在变得很清楚了......我为我的漫步道歉 –

嗨，我更新了我的答案 - 希望，这就是你要找的。 –

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

回答

相关问题