Количество столбцов 3 никогда не покидает ряд с 1 элементом - PullRequest
Новая
       106

Количество столбцов 3 никогда не покидает ряд с 1 элементом

0 голосов
/ 26 февраля 2019

Я заметил, что когда я использую счетчик столбцов: 3 в моем коде и у меня есть 7 элементов, например.В первых двух столбцах будет по 3 элемента в каждом, а в третьем столбце будет только один элемент (см. Рисунок, например).

Является ли это нормальным поведением количества столбцов или столбец должен заполнять весь столбецодинаково?

enter image description here

ОБНОВЛЕНО -

Я попытался возиться с ответом caiovisk, и с тех пор я изменил код с элементов li на div.это то, с чем я работаю.

Кажется, это прекрасно работает, но в моей ситуации иногда элементы могут быть больше, чем другие, вызывая пробелы (см. рисунок ниже).Как решить эту проблему, используя метод flex? 

.columns-3 {
		flex-basis: calc(33.33% - 20px);
		margin: 10px;
	}
	.redBox {
		height: 50px;
		background-color: red;
	}
	.bigger {
		height: 150px;
	}
<div class="columns">
		<div class="columns-3 redBox bigger"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox bigger"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox bigger"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
	</div>

Flex Picture

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Да, это нормальное поведение.Он разделит элементы или содержимое по указанному значению в column-count, а затем отобразит его в columns.Если вы используете ul, ol, div или какие-либо элементы, отличные от text, они будут размещены вертикально, что может быть нежелательным результатом, но для text это абсолютно логично.см. документы: https://drafts.csswg.org/css-multicol-1/#cc

Если вы хотите разделить свои внутренние элементы на столбцы и разделить их по горизонтали, вы можете использовать flexbox, см. подход ниже: 

.columns{
    display: flex;
    flex-wrap: wrap;
}
.columns-2 li {
    flex-basis: 50%;
}
.columns-3 li {
    flex-basis: 33.3334%;
}
.columns-4 li {
    flex-basis: 25%;
}
<h1>2 Columns</h1>
<ul class="columns columns-2">
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
<li>Column 7</li>
</ul>
<h1>3 Columns</h1>
<ul class="columns columns-3">
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
<li>Column 7</li>
</ul>
<h1>4 Columns</h1>
<ul class="columns columns-4">
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
<li>Column 7</li>
</ul>

РЕДАКТИРОВАНИЕ:

Согласно редактированию ответа, вы установили height: 50px; в .redbox иэто ограничение элемента, чтобы заполнить высоту.Установите значение min-height: 50px; 

.redBox {
        min-height: 50px;
        ...
}


.columns {
		display: flex;
    flex-flow: wrap;
}
.columns.columns-3 > div {
    flex-basis: calc(33.33% - 20px);
    margin: 10px;
}
.columns.redBox > div {
    min-height: 50px;
    background-color: red;
}
.bigger {
    height: 150px;
}
<div class="columns columns-3 redBox">
  <div class="bigger"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="bigger"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="bigger"></div>
  <div></div>
</div>
0 голосов
/ 26 февраля 2019

Проверьте, получили ли вы position:relative; на (я полагаю) элементе li.

...