Вертикальная упаковка в HTML

Question

Я ищу хороший способ сделать вертикальную обертку. Моя цель - поместить список флажков в элемент div. У меня есть чекбоксы, отсортированные по алфавиту, и я хочу, чтобы список перетекал из верхней части div в нижнюю, а затем начинался снова в новом столбце, когда они достигают нижней части. Прямо сейчас я могу сделать это, разбив список на части заранее определенного размера на стороне сервера, прежде чем вводить его в мой HTML-шаблон. Но вещи становятся запутанными, когда список становится настолько длинным, что приходится прокручивать. Я надеюсь заставить его прокручиваться только горизонтально. Это не так просто, так как я держу каждый кусок в плавающем элементе div, так что пробел: nowrap, похоже, не сокращает его. В настоящее время я использую javascript для подсчета количества фрагментов списка и увеличения ширины промежуточного контейнера (внутри div, который служит в качестве области просмотра, но содержит div, которые содержат данные). Я хочу что-то, что выглядит примерно так:

 __________________________
| []..... []..... [].....  |
| []..... []..... [].....  |
| []..... [].....          |
| []..... [].....          |
|__________________________|
|<|_____________|___||___|>|

Итак, я думаю, у меня есть два вопроса:

1. Есть ли хороший способ обернуть список по вертикали?
2. Есть ли хороший способ принудительной горизонтальной прокрутки, когда данные становятся слишком большими для области просмотра?

Answer 1

Я бы использовал CSS3 столбцы . Однако пока только WebKit (Safari, Chrome, ...) и Gecko (Firefox, ...) реализовали его, и вам придется добавить соответствующие префиксы поставщиков (-moz-column-width:...; -webkit-column-width:...;), чтобы он работал.

Если IE имеет для получения столбцов, лучше всего использовать floated div.

Answer 2

Я использовал небольшую предварительную обработку на стороне сервера. Этот сайт, и эта конкретная страница, все равно нуждались в значительном объеме предварительной обработки, и я не ожидаю, что размер данных станет слишком большим.

Answer 3

Чтобы управлять прокруткой окна просмотра, вы можете установить свойство переполнения CSS:

div#viewport{
  overflow: scroll;
  overflow-x: scroll; /* not sure if it's standard */
  height: 150px;
}

Answer 4

Я использую этот кусок Xsl для генерации таблицы с фиксированным количеством строк: -

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" />
<xsl:variable name="rowCount" select="6" />
<xsl:template match="/*">
    <table rules="all">
        <xsl:for-each select="item[position() &lt;= $rowCount]">
            <tr>
                <xsl:for-each select=". | following-sibling::item[position() mod $rowCount = 0]">
                    <td><xsl:value-of select="." /></td>
                </xsl:for-each>
            </tr>               
        </xsl:for-each>
    </table>
</xsl:template>

</xsl:stylesheet>

Вы можете заменить переменную rowCount параметром. Все, что вам тогда нужно, это вычислить, сколько строк займет вертикальная высота клиента порта представления (имейте в виду, что вы теряете некоторые при появлении горизонтальной полосы прокрутки, я бы сделал ее всегда видимой).

Это можно адаптировать для набора плавающих элементов, но я бы не стал беспокоиться. Ваш видовой экран просто должен быть div с фиксированной высотой / шириной и переполнением-x: scroll; Переполнение-у: скрытый

.

Answer 5

Я скажу, что за это скажу, но ... использую таблицу !

Ну, это не самый красивый способ, но он может решить твою проблему, я думаю