使用普通的舊HTML的流佈局行爲？

使用普通的舊HTML，我該如何實現這樣的佈局？使用普通的舊HTML的流佈局行爲？

enter image description here

我有以陣列10-50動態元素，我需要如圖所示以顯示它們。

如果我只是將它們全部添加到一個容器div，它從左到右。

如果每個元素都是一個div，它們從上到下堆疊，但從不換行到下一列。

這是如何使用普通的舊HTML來實現的？編輯我需要這個動態工作，例如如果可能只有2個項目，或50;我不能硬編碼列表。

來源

2011-07-27 Judah Himango

你是什麼意思的「普通的舊HTML」？你不想使用CSS？ –

我的意思是，我不想訴諸於JavaScript hackery來實現流佈局。我希望有一個HTML/CSS的方式來使這個工作，而不必與JS編寫自定義行爲。 –

<!DOCTYPE html> 
<html> 
<head><title>Test</title> 
<style type="text/css"> 
.flow ul { 
    float: left; 
} 

.flow li { 
    list-style: none; 
} 
</style> 
</head> 
<body> 
    <div class="flow"> 
     <ul> 
      <li>Albany, 1324</li> 
      <li>Albuquerque, 3456</li> 
      <li>Baton Rouge, 4566</li> 
      <li>Bellvue, 9856</li> 
      <li>Catameran, 75696</li> 
     </ul> 
     <ul> 
      <li>D SiteName, 1324</li> 
      <li>E SiteName, 3456</li> 
      <li>F SiteName, 4566</li> 
      <li>SiteName, 9856</li> 
      <li>SiteName, 75696</li> 
     </ul> 
     <ul> 
      <li>SiteName, 1324</li> 
      <li>SiteName, 3456</li> 
      <li>SiteName, 4566</li> 
      <li>SiteName, 9856</li> 
      <li>SiteName, 75696</li> 
     </ul> 
    </div> 
</body> 
</html>

或者，如果你的意思是沒有CSS的東西時，你說：「普通的老HTML」，你可能會想這樣的事情，但是這也許不是你想要的，因爲它不使用<div>元素的東西。

<!DOCTYPE html> 
<html> 
<head><title>Test</title> 
<body> 
    <table> 
    <tr> 
    <td> 
     <ul> 
      <li>Albany, 1324</li> 
      <li>Albuquerque, 3456</li> 
      <li>Baton Rouge, 4566</li> 
      <li>Bellvue, 9856</li> 
      <li>Catameran, 75696</li> 
     </ul> 
    </td> 
    <td> 
     <ul> 
      <li>D SiteName, 1324</li> 
      <li>E SiteName, 3456</li> 
      <li>F SiteName, 4566</li> 
      <li>SiteName, 9856</li> 
      <li>SiteName, 75696</li> 
     </ul> 
    </td> 
    <td> 
     <ul> 
      <li>SiteName, 1324</li> 
      <li>SiteName, 3456</li> 
      <li>SiteName, 4566</li> 
      <li>SiteName, 9856</li> 
      <li>SiteName, 75696</li> 
     </ul> 
    </td> 
    </tr> 
    </table> 
</body> 
</html>

您可能還希望使用這一翻譯的取決於你需要什麼<ul>和<li>元素<br>元件端接線路。

來源

2011-07-27 02:44:15

順便說一句，我在這裏使用閃亮的新HTML5。您可以更改DOCTYPE以使用一些普通的舊HTML4.01 Strict。 :-) –

嗯。那麼，我的物品列表是動態的，從AJAX調用中檢索。所以我不認爲這是正確的，但它給了我一個想法如何做一點模板hackery做到這一點。謝謝。 –

當然，您必須考慮並開發邏輯，以便在三個單獨的列表中顯示數組中的元素。我們可以在這裏爲你做這件事，因爲我們不知道你在做什麼。 :-)但是我希望以上發佈的兩個示例中的一個能夠幫助您開始。 :-) –

使用表格。上帝只知道人們使用它們的時間遠遠超過他們應該用於繪畫的時間，但這是他們的目的。

我不知道你可以自動換行，但即使你使用了浮動，你仍然需要預定義列。

你可以找到語法here。

來源

2011-07-27 02:46:40 Iterate

在普通的舊HTML中，您將使用ordered lists並重置每列的列表。

<ol> 
    <li>.</li> 
    <li>.</li> 
    <li>.</li> 
    <li>.</li> 
</ol> 

<ol start="5"> 
    <li>.</li> 
    <li>.</li> 
    <li>.</li> 
    <li>.</li> 
</ol>

等等

然後float列表左側。

當然，這不會動態更新。

編輯

按照評論，你可以用CSS3動態爲此

div{ 
    column-count: 3; 
    column-gap: 1em; 
    column-rule: 1px solid black; 
    -moz-column-count: 3; 
    -moz-column-gap: 1em; 
    -moz-column-rule: 1px solid black; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 1em; 
    -webkit-column-rule: 1px solid black; 
}

http://jsfiddle.net/jasongennaro/3GSp6/1/

這僅僅是現代瀏覽器。 Chrome，Firefox，Safari。

來源

2011-07-27 02:48:54

我需要這個動態工作。 –

像這樣：http://jsfiddle.net/PTLm6/5/

來源

2011-07-27 02:53:23 Sparkup