Подгонка последней строки на всю ширину контейнера
Вложений: 1
<div class="container"> <div class="item">item-1</div> <div class="item item-list"> <div class="elem">elem-1</div> <div class="elem">elem-2</div> <div class="elem">elem-3</div> </div> <div class="item item-filler">item-2</div> <div class="item">item-3</div> </div>Ширина контейнера фиксированная, ширина остальных элементов равна их содержимому, НО ширина элемента с классом "item-filler" должна быть такой, чтобы элемент заполнил собой всё оставшееся пространство в строке. Так же она должна иметь минимальное значение. Желательно чтобы элементы были инлайн-блочными и т.п. (не чистый инлайн). Можно ли сделать это средствами CSS? Картинка прилагается |
Shitbox2,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <style type="text/css"> .container{ display: flex; flex-wrap: wrap; width: 200px; background-color: #696969; } .item-filler{ min-width: 0; flex: 1; } .item{ background-color: #FF0000; margin: 5px; display: inline-block; } .elem { background-color: #FF0000; } .item.item-list { background-color: #696969; min-width: 95%; display: flex; justify-content: space-between; flex: 1; } </style> </head> <body> <div class="container"> <div class="item">item-1</div> <div class="item item-list"> <div class="elem">elem-1</div> <div class="elem">elem-2</div> <div class="elem">elem-3</div> </div> <div class="item item-filler">item-2</div> <div class="item">item-3</div> </div> </body> </html> |
<div class="container"> <div class="item">item-1</div> <div class="item item-list"> <div class="elem">elem-1</div> <div class="elem">elem-2</div> <div class="elem">elem-3elem-3-elem-1ele</div> <div class="elem">elem-3-elem-1</div> <div class="elem">elem-3-elem-2</div> <div class="elem">elem-3-elem-3-elem-3-elem-1</div> <div class="elem">elem-4-elem-1</div> <div class="elem">elem-5</div> </div> <div class="item item-filler">item-2</div> <div class="item">item-3</div> </div> <style> .container { width: 600px; box-shadow: 0 0 0 2px, inset 0 0 0 1em white; background: gray; display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; resize: both; overflow: auto; } .container > * { background: gray; padding: 2em; box-shadow: inset 0 0 0 1em white; } .item-list { display: contents; } .item-filler { flex: 1; } .container > * > * { background: red; padding: .8em; margin: 1.2em; } </style> |
Как быстро! Правда, не всё работает)
У Рони элементы не заполняют строку. Т.е. при любой ширине будет 3 элемента в строке. У Маллейса всё почти как надо, но если ширину поставить 400px, то всё ломается и последняя строка остается не заполненной. Вообще, тоже пробовал флексбокс, но как-то не получилось добиться желаемого. |
Всё дело в `display: contents`. Поставил его в свою флексбоксовскою верстку и всё заработало. Хорошая штука, жаль Майкрософт поднасрал, как обычно. Без `display: contents` реально?
|
Цитата:
<input type="range" min="0" max="1600" value="400" oninput="document.querySelector('.container').style.width = this.value + 'px';"> <div class="container"> <div class="item">item-1</div> <div class="elem">elem-1</div> <div class="elem">elem-2</div> <div class="elem">elem-3elem-3-elem-1ele</div> <div class="elem">elem-3-elem-1</div> <div class="elem">elem-3-elem-2</div> <div class="elem">elem-3-elem-3-elem-3-elem-1</div> <div class="elem">elem-4-elem-1</div> <div class="elem">elem-5</div> <div class="last-group"> <div class="item item-filler">item-2</div> <div class="item">item-3</div> </div> </div> <style> .container { min-width: 250px; width: 400px; box-shadow: 0 0 0 2px, inset 0 0 0 1em white; background: gray; display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; } .container > .elem { background: red; padding: .8em; margin: 1.2em; } .container > .item, .container > .last-group > .item { background: gray; padding: 2em; box-shadow: inset 0 0 0 1em white; } .container > .last-group { display: flex; flex: 1; } .container > .last-group > .item-filler { flex: 1; } </style> |
Цитата:
P.S. Проголосуйте и напишите им пару ласковых https://wpdev.uservoice.com/forums/2...s-from-css-dis |
Часовой пояс GMT +3, время: 13:09. |