Почему min-width и max-width не работает с float?

Question

[hrvasiliy]

Вот пример: jsbin.com. Хотелось бы реализовать min и max width для того, чтобы не оставалось "дыры" при уменьшении браузера. Возможно ли такое вообще? Может быть есть другой способ?

P.S.: Проценты и flexbox не подходят.

Answer 1

[Сергей delphinpro]

На самом деле работают эти свойства.
Но float`нутые блоки сжимаются до своего содержимого. Если ширина содержимого у вас будет менее min-width, то ширина блока станет равной min-width. Если ширина содержимого будет более max-width, то ширина блока также станет равной max-width. В остальных случаях ширина блока будет равной ширине содержимого.

UPD:
Вот, я накидал примерчик. По-моему, похоже на то, что вам нужно
jsfiddle.net/DelphinPRO/hm3ewt1d/

UPD2:
Или может быть так, если ширина у блоков должна быть постоянной.
jsfiddle.net/DelphinPRO/hm3ewt1d/1/

Comments

[hrvasiliy]

Не совсем то, что я хотел. Но уже очень близко! У вас описывается в коде до какого количества блоков в одной строке все это дело будет ресайзиться, а вот можно ли так, чтобы оно так же работало, только, допустим, на 80-ти дюймовом телевизоре? (Вопрос может быть и плохой, но я учусь, просто интересно). И второй вопрос: Можно ли в вашем примере сделать полную зависимость высоты от ширины блока? (Т.е. чтобы высота тоже уменьшалась/увеличивалась).

[hrvasiliy]

В UPD 2: так же один из вариантов, которым хотел воспользоваться, только не понял как сделать. Тоже неплохой способ, но как решить ту проблему, чтобы в строку могло влезать неограниченное количество блоков?

[Сергей delphinpro]

По количеству блоков на ум приходит только нагенерить кучу стилей :)

$maxColumns: 100;

@for $i from 2 through $maxColumns {
$columnBreakpoint: $minWidthColumn * $i + 40; // 40 - это расстояние меж блоков.
media (min-width: $сolumnBreakpoint) {
.box {
width: percentage(1/$i);
}
}
}

А по поводу зависимости высоты от ширины - вот такой костылёк :)
jsfiddle.net/DelphinPRO/hm3ewt1d/2

[hrvasiliy]

Сергей: Это уже очень неплохо! Только вот я никогда не работал с SCSS. По сути, даже не знаю как ваш код вставить к себе на страничку.

[hrvasiliy]

Сергей: Вопрос решен. Только вот ставить руби, к сожалению, пока не буду. Спасибо

[Сергей delphinpro]

Есть онлайн компиляторы scss -> css ;)

[hrvasiliy]

Сергей: Интересно, посмотрю! Спасибо!

Answer 2

[maxtrelle]

Возможной здесь найдете ответ - ru.learnlayout.com

Answer 3

[Егор Федосенко]

@media-query вам в руки, если вас правильно понял.

Comments

[hrvasiliy]

Думал об этом. В данном случае не особо подходит. Даже если попробовать его использовать, я так понимаю, стоит указывать ширину в процентах?

[Егор Федосенко]

hrvasiliy: напишите условие для @media-query и выставьте блокам ширину либо в 100% либо в 50%, так-же можете воспользоваться функцией calc()