Насколько равномерно распределяются элементы div (каждый разной ширины) в родительском элементе div?

Я видел это решение для равномерного распределения DIV: (Ширина жидкости с равномерно распределенными DIV), но для этого требуется, чтобы все DIV были одинаковой ширины. В моем случае это не сработает. У меня есть 5 DIV разной ширины, и я хотел бы разместить их равномерно. Возможно ли это без javascript?

Например:

<!-- The text should not wrap, but be on one line for each div -->
<div class="item" id="item1">Item One</div>
<div class="item" id="item2">Item # Two</div>
<div class="item" id="item3">Item Three</div>
<div class="item" id="item4">Item Four</div>
<div class="item" id="item5">Item Five, the Last</div>

Мне нужно, чтобы он работал в IE8+, Firefox 4+, Chrome, Safari.

EDIT: Еще одно требование: в div не должно быть места справа от последнего DIV или слева от первого DIV. Таким образом, пробел между ними равен разнице между суммой их ширин и шириной контейнера div.


html css positioning fluid-layout
person Don Rhummy    schedule 06.02.2014    source источник
comment
Определите равномерно распределяйте их   -  person Madbreaks    schedule 06.02.2014
comment
@Madbreaks одинаковое количество пробелов между краями каждого DIV   -  person Don Rhummy    schedule 06.02.2014
comment
Если это действительно ваше единственное требование, просто используйте одно и то же левое/правое поле для каждого и отключите левое поле для крайнего левого и правое поле для крайнего правого.   -  person Madbreaks    schedule 06.02.2014
comment
@Madbreaks Как мне это сделать, если я заранее не знаю ширину div (поскольку каждый браузер создает текст с немного разной реальной шириной даже с указанными пикселями)?   -  person Don Rhummy    schedule 06.02.2014
comment
как вы устанавливаете ширину внутренних div и div-контейнеров, если они есть?   -  person Miller    schedule 06.02.2014
comment
Вы не определили никаких требований, которые зависят от ширины div, только чтобы между ними было равное расстояние.   -  person Madbreaks    schedule 06.02.2014
comment
@Madbreaks Извините. Я обновил пост.   -  person Don Rhummy    schedule 06.02.2014

Ответы (3)


arrow_upward
19
arrow_downward

вы можете использовать: display:flex; на родительском контейнере

.evenly {
  display:flex;
  justify-content:space-between;
  border:solid;
}
.evenly div {
  white-space:nowrap;
  background:gray;
}

<div class="evenly">
  <div class="item" id="item1">Item One</div>
<div class="item" id="item2">Item # Two</div>
<div class="item" id="item3">Item Three</div>
<div class="item" id="item4">Item Four</div>
<div class="item" id="item5">Item Five, the Last</div>
</div>

ДЕМО: http://codepen.io/anon/pen/wxtqJ

дополнительная рамка и фон для демонстрационных целей.

Если вам нужна альтернатива, которая работает для старой навигации, вы можете использовать свойства text-align:justify: http://codepen.io/anon/pen/FnDqr .

person G-Cyrillus    schedule 06.02.2014
comment
ну, похоже, у вас уже есть ответ на другой пост!? - person G-Cyrillus; 06.02.2014
comment
@GCyrillius Это не работает в IE8+. А в каком другом посте есть ответ? Я видел ответ только для DIV одинакового размера, чего нет у меня. - person Don Rhummy; 06.02.2014
comment
этот пост, связанный с stackoverflow.com/questions /6865194/ , для IE8 это должно работать, если только оно не понимает псевдоэлементы :after, если только вы не используете специальный режим. - person G-Cyrillus; 06.02.2014
comment
возможно, вам следует протестировать его в полностраничном режиме с помощью IE8 s.codepen.io/gc-nomade /fullpage/GyiCv? - person G-Cyrillus; 06.02.2014
comment
... IE нужен размер шрифта: 0,01 пикселя, а не размер шрифта: 0; чтобы показать элемент после :)... забыл об этом - person G-Cyrillus; 06.02.2014
comment
Сообщение, на которое я ссылался, требует одинаковых размеров div. - person Don Rhummy; 07.02.2014
comment
не указывайте ширину div, как для обеих ссылок, которые я вам дал :). - person G-Cyrillus; 07.02.2014
comment
@DonRhummy, кстати, этот ответ продал вашу проблему? - person G-Cyrillus; 17.01.2016
comment
нет, мне также нужно было поддерживать старые браузеры (как говорится в моем посте, IE8), и они не поддерживают flex - person Don Rhummy; 18.01.2016
comment
@DonRhummy хорошо, вы заметили альтернативу с text-align-justify, которая будет работать даже в IE, если вы используете дополнительный тег вместо псевдо? спрашиваю просто потому что мне интересно ;) - person G-Cyrillus; 18.01.2016

arrow_upward
3
arrow_downward

Я предпочитаю display:flex; как сказано в ответе ранее. Но есть и другое решение, если я правильно понял требования. Поскольку у меня нет здесь IE8 TestVM, я предоставляю вам возможность тестирования. Вы можете использовать display: table;

Следующее решение:

.items
{
    display: table;
    width: 100%;
}
.item
{
    display:table-cell;
}

С этим HTML

<div class="items">
    <div class="item" id="item1">Item One</div>
    <div class="item" id="item2">Item # Two</div>
    <div class="item" id="item3">Item Three</div>
    <div class="item" id="item4">Item Four</div>
    <div class="item" id="item5">Item Five, the Last is pretty long</div>
</div>

Тестовая скрипта: http://fiddle.jshell.net/HLFXH/

person Nico O    schedule 06.02.2014
comment
@DonRhummy, спасибо, я знаю об этом. Обидно, но мы привыкли к разочарованию в IE... не так ли? ;) - person Nico O; 06.02.2014
comment
У меня странное ощущение, что я пропустил некоторые требования... Потому что, если бы это было так просто, ответов было бы больше... @op, если я что-то пропустил, добавьте комментарий. - person Nico O; 06.02.2014
comment
@DonRhummy, ты видел, мой ответ не о display-flex, верно? Если ответ не подходит, скажите, чего не хватает? - person Nico O; 07.02.2014

arrow_upward
0
arrow_downward

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

<div class="items">
    <div class="item" id="item1"><div>Item One</div></div>
    <div class="item" id="item2"><div>Item # Two</div></div>
    <div class="item" id="item3"><div>Item Three</div></div>
    <div class="item" id="item4"><div>Item Four</div></div>
    <div class="item" id="item5"><div>Item Five, the Last is pretty long</div></div>
</div>

И я указал ширину класса «.item» в процентах или пикселях. Я взял ширину самого длинного div и использовал justify-content как пробел между ними, а затем соответствующим образом выровнял отдельный div внутри «.item».

Надеюсь, это поможет.

person Shyamli Gujar    schedule 05.03.2020