Question

我们说我有以下HTML代码。

<div class='container'>
    <div style='width: 50px; height: random' class='col1'>1</div>
    <div style='width: 50px; height: random' class='col3'>2</div>
    <div style='width: 50px; height: random' class='col2'>3</div>
    <div style='width: 50px; height: random' class='col3'>4</div>
    <div style='width: 50px; height: random' class='col1'>5</div>
    <div style='width: 50px; height: random' class='col2'>6</div>
    <div style='width: 50px; height: random' class='col1'>7</div>
    <div style='width: 50px; height: random' class='col3'>8</div>
    <div style='width: 50px; height: random' class='col2'>9</div>
</div>

<!-

|1| |3| |2| // height of 2 is greater
|5| |6| | | // height of 5 is greater
| | |9| |4| // height of 9 is greater
|7| | | |8|

->

我希望container有3列。我还希望每个孩子根据其类别分类到其中一列中。显然，用JavaScript做这件事很容易，但我想知道用CSS做这件事是否可行。

＆＃13;

.grid {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  column-count: 4;
  column-gap: 15px;
  column-fill: auto;
}
.block {
  background-color: #ee01ca;
  display: block;
  padding: 20px;
  word-wrap: break-word;
  margin-bottom: 20px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
}

.one {
  height: 100px;
}

.two {
  height: 200px;
}

.three {
  height: 300px;
}

＆＃13;

<div class="grid">
  <div class="block one">ervewrv</div>
  <div class="block two">afrvewrwerb</div>
  <div class="block three">dfvdsf</div>
  <div class="block one">vdfvdf</div>
  <div class="block two">dfw45g4</div>
  <div class="block one">ervewrv</div>
  <div class="block two">afrvewrwerb</div>
  <div class="block three">dfvdsf</div>
  <div class="block one">vdfvdf</div>
  <div class="block two">dfw45g4</div>
  <div class="block three">4rv4r</div>
  <div class="block one">4rv454</div>
  <div class="block three">4rv4r</div>
  <div class="block one">4rv454</div>
  <div class="block one">ervewrv</div>
  <div class="block one">ervewrv</div>
  <div class="block two">afrvewrwerb</div>
  <div class="block three">dfvdsf</div>
  <div class="block one">vdfvdf</div>
  <div class="block two">dfw45g4</div>
  <div class="block three">4rv4r</div>
  <div class="block one">4rv454</div>
  <div class="block one">ervewrv</div>
  <div class="block two">afrvewrwerb</div>
  <div class="block three">dfvdsf</div>
  <div class="block one">vdfvdf</div>
  <div class="block two">dfw45g4</div>
  <div class="block three">4rv4r</div>
  <div class="block one">4rv454</div>
  <div class="block two">afrvewrwerb</div>
  <div class="block three">dfvdsf</div>
  <div class="block one">vdfvdf</div>
  <div class="block two">dfw45g4</div>
  <div class="block one">ervewrv</div>
  <div class="block two">afrvewrwerb</div>
  <div class="block three">dfvdsf</div>
  <div class="block one">vdfvdf</div>
  <div class="block two">dfw45g4</div>
  <div class="block three">4rv4r</div>
  <div class="block one">4rv454</div>
  <div class="block three">4rv4r</div>
  <div class="block one">4rv454</div>
</div>

＆＃13;

这类似于我之后的效果，除了我需要从左到右进行排序。因此，在示例中，ervewrv应该留在afrvewrwerb。

Answer 1

CSS网格可能适用于您的布局。

使用public function handle() { $token = should_come_from job; $sid = should_come_from job; $ids = should_come_from job; $msg = should_come_from job; try{ //send message } catch (exception $e) { handle exception } }值来订购您的内容。

grid-column

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  grid-auto-flow: dense;
}

.container >div {
  width: 50px;
  height: 50px;
  background: pink;
}

.col1 {
  grid-column: 1;
}

.col2 {
  grid-column: 2;
}

.col3 {
  grid-column: 3;
}

有没有办法根据孩子的班级将孩子分成几列？

1 个答案: