У меня есть контейнер с жидкостью шириной DIV.
В рамках этого у меня есть 4 DIVs все 300px x 250px ...
<div id="container">
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
<div class="box4"> </div>
</div>
Я хочу, чтобы поле 1 было смещено влево, поле 4 смещено вправо, а поля 2 и 3 - между ними равномерно. Я хочу, чтобы интервал также был плавным, так как браузер становится меньше, пространство также становится меньше.
html
css
fluid-layout
Ли Прайс
источник
источник
display:inline-block;
вместо плавания?inline-block
наinline
элементыОтветы:
Смотрите: http://jsfiddle.net/thirtydot/EDp8R/
text-align: justify
в сочетании с.stretch
тем, что обрабатывает позиционирование.display:inline-block; *display:inline; zoom:1
исправленияinline-block
для IE6 / 7, смотрите здесь .font-size: 0; line-height: 0
исправляет небольшую проблему в IE6.Экстра
span
(.stretch
) можно заменить на:after
.Это все еще работает во всех тех же браузерах, что и вышеуказанное решение.
:after
не работает в IE6 / 7, но они всеdistribute-all-lines
равно используют , так что это не имеет значения.Смотрите: http://jsfiddle.net/thirtydot/EDp8R/3/
Есть небольшой недостаток
:after
: чтобы последняя строка отлично работала в Safari, вы должны быть осторожны с пробелами в HTML.В частности, это не работает:
И это делает:
Вы можете использовать это для любого произвольного числа дочерних элементов,
div
не добавляяboxN
класс к каждому, изменяяв
Это выбирает любой div, который является первым дочерним элементом
#container
div, и никаких других ниже него. Чтобы обобщить цвета фона, вы можете использовать CSS3-селектор n-го порядка , хотя он поддерживается только в IE9 + и других современных браузерах:будет выглядеть так:
Смотрите здесь для примера jsfiddle.
источник
<div/><div/><div/>
это не работает. Вы должны иметь<div/> <div/> <div/>
.justify
для такого случая, но спасибо, чтобы предоставить рабочее решение. спасло меня много экспериментов (несмотря на 3-часовую отладку: D). Кроме того, я мог бы добавить примечание, что если вы хотите, чтобы ваш последний ряд был выровнен по левому краю, вы должны добавить несколько дополнительных невидимых полей (чтобы завершить ряд).stretch
/:after
необходим, потому что (обычно) с выровненным текстом последняя строка не выровнена . Здесь мы хотим, чтобы последняя строка была обоснована, отсюда и необходимость:after
. Что касается вашего второго вопроса, я изучил это некоторое время назад в предыдущем ответе . В этом ответе был необходим JavaScript. Если вам нужна поддержка старых браузеров (IE8), то, я думаю, вам нужен JavaScript.Самый простой способ сделать это сейчас - использовать flexbox:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS это просто:
демо: http://jsfiddle.net/QPrk3/
Однако в настоящее время это поддерживается только относительно недавними браузерами ( http://caniuse.com/flexbox ). Кроме того, спецификация макета flexbox несколько раз менялась, поэтому можно охватить больше браузеров, дополнительно включив старый синтаксис:
http://css-tricks.com/old-flexbox-and-new-flexbox/
http://css-tricks.com/using-flexbox/
источник
Если опция css3 является опцией, это можно сделать с помощью
calc()
функции css .Случай 1: Оправдывающие блоки на одной строке ( FIDDLE )
Разметка проста - куча элементов с некоторым элементом контейнера.
CSS выглядит так:
где -1px для исправления ошибки IE9 + calc / округления - смотрите здесь
Случай 2: Оправдывающие блоки на нескольких строках ( FIDDLE )
Здесь, помимо
calc()
функции,media queries
необходимы.Основная идея состоит в том, чтобы настроить медиазапрос для каждого состояния #columns, где я затем использую calc () для определения поля справа для каждого из элементов (кроме элементов в последнем столбце).
Это звучит как большая работа, но если вы используете LESS или SASS, это можно сделать довольно легко
(Это все еще можно сделать с помощью обычного CSS, но тогда вам придется делать все расчеты вручную, а затем, если вы измените ширину вашего бокса - вам придется все заново обрабатывать)
Ниже приведен пример использования LESS: (Вы можете скопировать / вставить этот код здесь, чтобы поиграть с ним, [это также код, который я использовал для генерации вышеупомянутой скрипки])
Таким образом, вначале вам нужно определить ширину блока и минимальный размер поля между блоками.
С этим вы можете определить, сколько места вам нужно для каждого штата.
Затем используйте calc () для вычисления правого поля и nth-child, чтобы удалить правое поле из полей в последнем столбце.
Преимущество этого ответа над общепринятом ответ , который использует в
text-align:justify
том , что когда у вас есть более чем один ряд коробки - ящики на заключительном подряд не получают «оправданным» , например: если есть 2 коробки , оставшиеся на заключительном ряду - я не нужно, чтобы первый прямоугольник находился слева, а следующий - справа, - скорее, чтобы прямоугольники следовали друг за другом по порядку.Что касается поддержки браузера : это будет работать в IE9 +, Firefox, Chrome, Safari6.0 + - (см. Здесь для получения более подробной информации).
Однако я заметил, что в IE9 + естьнекоторая ошибкамежду состояниями медиа-запросов.[если кто-то знает, как это исправить, мне бы очень хотелось знать :)]<- ИСПРАВЛЕНО ЗДЕСЬисточник
В других публикациях упоминается flexbox , но если необходимо более одной строки элементов ,
space-between
свойство flexbox не выполняется (см. Конец публикации).На сегодняшний день единственное чистое решение для этого с
Модуль CSS Grid Layout ( Codepen demo )
В основном соответствующий код сводится к следующему:
1) Сделать элемент контейнера контейнером сетки
2) Установите сетку с «автоматическим» количеством столбцов - при необходимости. Это сделано для адаптивных макетов. Ширина каждого столбца будет 120px. (Обратите внимание на использование
auto-fit
( применительно кauto-fill
), которое (для однострочного макета) сворачивает пустые дорожки в 0 - позволяя элементам расширяться, чтобы занять оставшееся пространство. ( Посмотрите эту демонстрацию, чтобы увидеть, о чем я говорю )).3) Установите промежутки / желоба для строк и столбцов сетки - здесь, так как нужно расположение «промежуток» - разрыв будет фактически минимальным, потому что он будет расти по мере необходимости.
4) и 5) - похоже на flexbox.
Codepen demo ( измените размер, чтобы увидеть эффект)
Поддержка браузера - Caniuse
В настоящее время поддерживается Chrome (Blink), Firefox, Safari и Edge! ... с частичной поддержкой от IE (см. это сообщение Рэйчел Эндрю)
NB:
space-between
Свойство Flexbox прекрасно работает для одного ряда элементов, но при применении к флекс-контейнеру, который упаковывает его элементы - (сflex-wrap: wrap
) - не выполняется, поскольку вы не можете контролировать выравнивание последнего ряда элементов; последний ряд всегда будет оправдан (обычно не то, что вы хотите)Демонстрировать:
Показать фрагмент кода
Codepen ( измените размер, чтобы увидеть, о чем я говорю)
Дальнейшее чтение по сеткам CSS:
источник
Это сработало для меня с 5 изображениями разных размеров.
Это работает из-за justify-content: space -ween, и он находится в списке, отображаемом горизонтально.
По CSS
На HTML
источник
в
jQuery
вас может быть нацелен на Родителя напрямую.Это позволит
parent
расти горизонтально приchildren
добавлении бенга.ПРИМЕЧАНИЕ: это предполагает, что
'.children'
естьwidth
иHeight
SetНадеюсь, это поможет.
источник
Если вы знаете количество элементов на «строку» и ширину контейнера, вы можете использовать селектор, чтобы добавить поле к элементам, которое вам нужно, чтобы получить оправданный вид.
У меня были строки из трех делений, которые я хотел оправдать, поэтому использовал:
.tile:nth-child(3n+2) { margin: 0 10px }
это позволяет центру div в каждом ряду иметь поле, которое вынуждает 1-й и 3-й div к внешним краям контейнера
Также отлично подходит для других вещей, таких как границы фона и т. Д.
источник