Подгонка последней строки на всю ширину контейнера
Вложений: 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, время: 21:08. |