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列

回答

相關問題