Форум

Shitbox2 · #1 (**permalink**) 07.08.2018, 12:59

<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? Картинка прилагается

рони · #2 (**permalink**) 07.08.2018, 13:56

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>

Malleys · #3 (**permalink**) 07.08.2018, 14:39

<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>

Shitbox2 · #4 (**permalink**) 07.08.2018, 15:55

Как быстро! Правда, не всё работает)

У Рони элементы не заполняют строку. Т.е. при любой ширине будет 3 элемента в строке.

У Маллейса всё почти как надо, но если ширину поставить 400px, то всё ломается и последняя строка остается не заполненной.

Вообще, тоже пробовал флексбокс, но как-то не получилось добиться желаемого.

Shitbox2 · #5 (**permalink**) 07.08.2018, 17:42

Всё дело в `display: contents`. Поставил его в свою флексбоксовскою верстку и всё заработало. Хорошая штука, жаль Майкрософт поднасрал, как обычно. Без `display: contents` реально?

Malleys · #6 (**permalink**) 07.08.2018, 18:29

Сообщение от Shitbox2

Без `display: contents` реально?

Если только поменять немного HTML...

<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>

Shitbox2 · #7 (**permalink**) 07.08.2018, 19:01

Сообщение от Malleys

Если только поменять немного HTML...

Вот-вот. Именно так у меня сейчас и сделано. JS получается более костыльный. Одно дело менять список в отдельном контейнере, другое - в общей куче

P.S. Проголосуйте и напишите им пару ласковых https://wpdev.uservoice.com/forums/2...s-from-css-dis

Форум

Справочник

Discord чат

Курсы javascript