таблица css / div форматирование динамического числа элементов ячеек

0

Я создаю HTML-макет для хобби человека. Человек может выбирать между 1-20 хобби, которые им нравятся. Я хочу показать их в строках с тремя столбцами. Есть ли способ сделать это с помощью div, чтобы мне не приходилось вычислять, когда вставлять новую строку? Например, если я использую таблицу, и пользователь выбирает 7 хобби, это выглядит так:

<tr><td>hobby 1</td><td>hobby 2</td><td>hobby3</td</tr>
<tr><td>hobby 4</td><td>hobby 5</td><td>hobby6</td</tr>
<tr><td>hobby 7</td><td></td><td></td</tr>

и я должен был бы знать, когда вставлять новую строку (на стороне сервера при получении данных). Это немного боль - я напечатал еще 3 столбца? ok, завершите строку и запустите новую.

Мне хотелось бы что-то вроде:

<div container>
<div>hobby 1</div>
<div>hobby 2</div>
<div>hobby 3</div>
<div>hobby 4</div>
<div>hobby 5</div>
<div>hobby 6</div>
<div>hobby 7</div>
</div>

где вывод выглядит следующим образом:

hobby1   hobby2   hobby3
hobby4   hobby5   hobby6
hobby7

Контейнер будет фиксированным размером (600 пикселей), а также каждой ячейкой (200 пикселей)

  • 0
    ты уже пробовал просто пропустить оставшиеся div? Вы хотите, чтобы элементы div имели одинаковую ширину, чтобы они выстраивались в столбцы
Теги:

3 ответа

1
Лучший ответ

Учитывая контейнер. .table width: 600px, просто установите каждый дочерний div на width: 50% и float: left чтобы достичь желаемого эффекта.

HTML

<div class="table">
    <div>hobby 1</div>
    <div>hobby 2</div>
    <div>hobby 3</div>
    <div>hobby 4</div>
    <div>hobby 5</div>
    <div>hobby 6</div>
    <div>hobby 7</div>
</div>

CSS

.table {
    overflow: hidden; /** Contain floated elements **/
    width: 600px;
}

.table div {
    float: left;
    width: 33%; /** Or, a fixed pixel width of 200px; **/
}

Рабочий пример [Обновлено 10/4]

ПРИМЕЧАНИЕ. Обновлено для отображения 3 столбцов вместо 2. Обновлен пример скрипта.

Поделиться
  • 0
    Плавание div'ов влево - самое простое решение, но ОП запрашивает 3 столбца, а не 2.
  • 0
    Это работает с изменением .table div на width: 200px; для 3 столбцов вместо ширины: 50% для 2 столбцов
Показать ещё 1 комментарий
1

Я бы предложил использовать столбцы CSS:

<!-- note that I've used 'container' as an id, rather than just free floating
     the string within the tag (which would make it an invalid attribute) -->
<div id="container">
    <div>hobby 1</div>
    <div>hobby 2</div>
    <div>hobby 3</div>
    <div>hobby 4</div>
    <div>hobby 5</div>
    <div>hobby 6</div>
    <div>hobby 7</div>
</div>

С помощью CSS:

#container {
    -moz-column-count: 3;
    -ms-column-count: 3;
    -o-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

Демо-версия JS Fiddle.

Очевидно, что это решение требует, чтобы браузер реализовал многоклассовый макетный модуль CSS, можно использовать CSS для проверки поддержки браузера для данной пары значений свойств CSS (хотя это имеет свои проблемы и еще менее хорошо поддерживается чем столбцы CSS, однако, если браузер поддерживает синтаксис @supports() то есть довольно хороший шанс, что он также поддерживает столбцы:

/* defaults, to style if columns are not supported: */
#container {
}
#container div {
    display: inline-block;
    height: 1.5em;
    line-height: 1.5em;
    text-indent: 0.5em;
    float: left;
    width: 30%;
    border: 1px solid #000;
    margin: 0 0.5em 0.2em 0.5em;
}
/* testing for support for the given property-name and the property-value: */
@supports (-moz-column-count: 3) or (-ms-column-count: 3) or (-o-column-count: 3) or (-webkit-clumn-count: 3) or (column-count: 3) {
    /* if the browser supports the property-name and property-value, the following styles are used, if the browser doesn't understand the syntax the rules are discarded */
    #container {
        -moz-column-count: 3;
        -ms-column-count: 3;
        -o-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
    #container div {
        /* unset the 'if not supported' styling */
        display: block;
        float: none;
        /* aesthetics, just because; adjust to taste */
        width: 90%;
        margin: 0 auto 0.5em auto;
    }
}

Демо-версия JS Fiddle.

Теперь, выше, я сказал, что @supports имеет "свои проблемы"; процитировать Эрика Мейера:

Считается, что процессор CSS поддерживает объявление (состоящее из свойства и значения), если оно принимает это объявление (вместо того, чтобы отбрасывать его как ошибку синтаксического анализа). Если процессор не реализует, с приемлемым уровнем поддержки, заданное значение, то он не должен принимать декларацию или поддержку заявки.

Поэтому в этом первом предложении было сказано, что "поддержка" означает "принимает [а] декларацию" и не бросает ее на пол, как то, что она не распознает. Другими словами, если браузер анализирует пару property: value, то это считается "поддержкой" для указанной пары. Обратите внимание, что в этом предложении ничего не говорится о том, что происходит после разбора. В соответствии с этим браузер может иметь полностью запутанную, частичную и вообще непригодную реализацию пары property: value, но акт распознавания означает, что theres "поддерживает".

Ссылка: "Неспособные обещания", Эрик Мейер, доступ к: 2013-10-03, 23:43 (британское летнее время)

Несмотря на вышеизложенное, кажется, что он работает (в данном случае, проверен в Chromium 28 на Ubuntu 12.10), но, по-видимому, потенциально-хрупкий.

Рекомендации:

Поделиться
0

Как насчет чего-то вроде этого:

#hobby{
         display:inline-block;
         width: 197px;
         max-width:197px;
         height:200px;
         max-height:200px;
         margin:0px;
         margin-top:2px;
         overflow:hidden; 
}

http://jsfiddle.net/3m2NK/4/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню