Поведение макета потока с использованием простого старого HTML? - PullRequest
Новая
       8

Поведение макета потока с использованием простого старого HTML?

1 голос
/ 27 июля 2011

Используя обычный старый HTML, как мне получить такой макет?

enter image description here

У меня есть 10-50 динамических элементов в массиве, и мне нужно отобразитьих, как показано.

Если я просто добавлю их все в контейнерный элемент div, он перейдет слева направо.

Если каждый элемент является элементом div, они укладываются сверху вниз, но никогда не переносятся в следующий столбец.

Как это обычно достигается с помощью простого старого HTML? edit Мне нужно, чтобы это работало динамически, например, если может быть только 2 элемента или 50;Я не могу жестко закодировать списки 3

Ответы [ 4 ]

2 голосов
/ 27 июля 2011 
<!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>

Вы также можете использовать строки, оканчивающиеся <br> элементами, целыми из <ul> и <li> элементов в зависимости от того, что вам нужно.

1 голос
/ 27 июля 2011

В простом старом 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.

1 голос
/ 27 июля 2011

Используйте таблицы. Бог знает, что люди используют их гораздо больше, чем следовало бы для графики, но для этого они и были созданы.

Я не знаю, что вы можете заставить его автоматически переноситься, но даже если вы используете float - вам все равно придется предварительно определять столбцы.

Синтаксис можно найти здесь .

0 голосов
/ 27 июля 2011
...