主页 / 问题 / 974547
Accepted
MoloF
Asked:2020-04-25 02:02:17 +0800 CST2020-04-25 02:02:17 +0800 CST

CSS | 如何垂直捏合元素

  • 772

在此处输入图像描述

这样的事情怎么可能做到？我什至不知道该怎么称呼这种暗恋

css

2 个回答

  1. 出于类似目的，您可以使用css-grid：

    .grid {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: repeat(10, 35px);
  grid-template-columns: repeat(5, auto);
  border: 1px dashed gray;
}
.grid-item {
  padding: 15px;
  border: 2px solid black;
}
.item1 {
  grid-column: 1 / 6;
}
.item2,
.item5,
.item11 {
  grid-row: 2 / 5;
}
.item3,
.item6,
.item12 {
  grid-row: 5 / 8;
}
.item4,
.item7,
.item13 {
  grid-row: 8 / 11;
}
.item8 {
  grid-row: 2 / 3;
}
.item8 {
  grid-row: 3 / 6;
}
.item9 {
  grid-row: 6 / 9;
}
.item14 {
  grid-row: 2 / 4;
}
.item15 {
  grid-row: 4 / 7;
}
.item16 {
  grid-row: 7 / 10;
}
    <div class="grid">
  <div class="grid-item item1"></div>
  <div class="grid-item item2"></div>
  <div class="grid-item item3"></div>
  <div class="grid-item item4"></div>
  <div class="grid-item item5"></div>
  <div class="grid-item item6"></div>
  <div class="grid-item item7"></div>
  <div class="grid-item item8"></div>
  <div class="grid-item item9"></div>
  <div class="grid-item item10"></div>
  <div class="grid-item item11"></div>
  <div class="grid-item item12"></div>
  <div class="grid-item item13"></div>
  <div class="grid-item item14"></div>
  <div class="grid-item item15"></div>
  <div class="grid-item item16"></div>
</div>

    • 3
  2. Best Answer

    UPD @MaximLensky 提供了一个不错的选择：

    所有其他块立即推入一个公共块，并为公共块提供属性：
    • 设置列数：column-count: 5;
    • 指定列之间的缩进：column-gap: 0;
    • 设置列之间的边界column-rule: 1px solid #123;

    由于列数，它本身已经根据内容确定了站在哪里。唯一的缺点是您不能确定将某些块放在顶行（在第二个示例中，您可以）

    到处添加-webkit-并-moz-确保：

    //Сюда можете не вникать, сделано для наполнения блоков случайным текстом.

(function(){
  const inner = document.getElementsByClassName('inner');
  const str = "Test, ";
  for(let i = 0; i < inner.length; i++){
    let x = Math.ceil(Math.random()*50);
    for(let u = 0; u < x; u++){
      inner[i].innerHTML += str;
    }
  }
})();
    .column {
  column-count: 5; -webkit-column-count: 5; -moz-column-count: 5;
  column-rule: 1px solid #123; -webkit-column-rule: 1px solid #123; -moz-column-rule: 1px solid #123;
  column-gap: 0; -webkit-column-rule: 1px solid #123; -moz-column-rule: 1px solid #123;
}

.inner {border-bottom: 1px solid red; margin: 0;width: 100%}
    <div class="column">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

    第二种选择：

    该属性display: flex将所有内部元素水平排列在一起。你所要做的就是制作 5 个这些水平 div，并在其中放置其他常规块，这些块依次占据其父块宽度的 100%。

    div {border: 1px solid red; margin: 2px;}
.H50 {height: 50px;}
.H30 {height: 30px;}
.flexy {width: 20%; border: none;}
.flexbox {display: flex; border: 1px solid #123; padding: 5px;}
    <div class="flexbox">
  <div class="flexy">
    <div class="H50"></div>
    <div class="H30"></div>
    <div class="H50"></div>
  </div>
  <div class="flexy">
    <div class="H50"></div>
    <div class="H30"></div>
    <div class="H30"></div>
  </div>
  <div class="flexy">
    <div class="H50"></div>
    <div class="H50"></div>
    <div class="H50"></div>
  </div>
  <div class="flexy">
    <div class="H30"></div>
    <div class="H30"></div>
    <div class="H30"></div>
  </div>
  <div class="flexy">
    <div class="H50"></div>
    <div class="H30"></div>
    <div class="H30"></div>
  </div>
</div>

    有一个缺点。没有边距 - 在块的交界处，获得双边框。如果你想把它排列得很紧，你将不得不与border-top、border-bottom、border-left、border-right混淆。

    • 2

相关问题