Изменить размер неизвестного количества элементов для заполнения ширины родительского контейнера

Мне нужно поместить неизвестное количество div (вероятно, ограничение около 5) в родительский контейнер и всегда следить за тем, чтобы они оставались одинаково разделенными. Я не уверен, что это можно сделать только с помощью CSS, но я подумал, что лучше спросить. Так что, если мы знаем, что используются 3 дивы:Изменить размер неизвестного количества элементов для заполнения ширины родительского контейнера

<style> 
    .menu-button { 
    float: left; 
    width: 33%; 
    } 
</style> 
<div> 
    <div class="menu-button">Button X</div> 
    <div class="menu-button">Button Y</div> 
    <div class="menu-button">Button Z</div> 
</div>

Кажется, работает, но что, если число .menu-кнопки дивы неизвестна? Есть ли лучший способ сделать это, чтобы он автоматически настраивался горизонтально?

источник

2011-02-09 Anthony Hiscox

К несчастью, я думаю, вам придется использовать таблицы, чтобы сделать это. Как <td> 's изменить размер itslef, чтобы вписаться в полную ширину.

НТН

источник

2011-02-09 09:30:44 Chin

+1 Согласен, может быть, это не самый чистый но можно утверждать, что это табличные данные одной строки и неизвестное количество ячеек. – Bazzz

Этот способ работает довольно красиво, быстро, и достаточно прост в стиле. Извините за задержанный ответ и спасибо. –

@ Энтони - Рад, что это отсортировано. @Bazzz Я полностью согласен, это не самый чистый способ .. но в некоторых случаях нам нужно немного сгибать правила. – Chin

Try this solution (demo page).

В принципе, вам нужно сделать divs display:inline-block и применить text-align:justify к ним. Затем запустите разрыв линии. Один из недостатков - всегда будет какое-то пространство между div, т. Е. Невозможно связать их края.

источник

2011-02-09 09:53:50 lashtal

это не работает, с 'inline-block', divs становятся различной ширины в соответствии с их содержимым. Если вы укажете ширину, вы не знаете, что ее установить, так как вы не знаете, сколько у них есть div. Вернуться к началу. – Bazzz

Чтобы сделать это с любым элементом, у вас есть два решения:

делают браузер имитируя поведение таблицы
с помощью Flexible Box макет

Например, чтобы создать горизонтальное меню , с равной шириной каждого li элементов, с этим кодом HTML:

<div id="menu"> 
    <ul> 
    <li><a href="#">First Element</a></li> 
    <li><a href="#">Second Element</a></li> 
    <li><a href="#">Third Element</a></li> 
    ... 
    <li><a href="#">N Element</a></li> 
    </ul> 
</div>

Используя макет таблицы, код CSS будет выглядеть так:

#menu{ 
    width: 100%; /* for instance */ 
    display: table; 
    table-layout: fixed; 
} 
#menu ul{ 
    display: table-row; 
} 
#menu ul li{ 
    display: table-cell; 
}

Гибкая Box макет является более современным решением, и это pretty widely supported в настоящее время:

#menu{ 
    width: 100%; /* for instance */ 
} 
#menu ul{ 
    display: flex; 
    flex-flow: row; 
} 
#menu ul li{ 
    flex-grow: 1; 
}

источник

2011-11-23 18:35:17 Capripot

Изменить размер неизвестного количества элементов для заполнения ширины родительского контейнера

ответ

Смежные вопросы