CSS：删除框之间的空白空间[重复]答案

【问题标题】：CSS: remove empty Space between boxes [duplicate]CSS：删除框之间的空白空间[重复]
【发布时间】：2020-03-19 15:12:18
【问题描述】：

我有一个弹性布局（不确定这是否正确）和内容大小不同的盒子。我可以定义宽度，但高度是可变的。如果我有很多大小不等的盒子，那么内容较少的盒子就会有很多空白空间。填补空间对我来说很重要。知道如何摆脱空白空间吗？

查看示例：https://jsbin.com/kunekef/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    .part {
      width: 40%;
      xheight: 200px;
    }
  </style>
</head>
<body>

  <div class="d-flex flex-wrap" style="height:100%; width:100%;">
    <div class="part p-3">1 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="part p-3">2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. t ever since the 1500s, when an unknown printer took a o make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="part p-3">3 dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="part p-3">4 industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="part p-3">5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  </div>
</body>
</html>

【问题讨论】：

flex 不能这样做，但列 CSS 可以：jsbin.com/yeqezajuho/1/edit?html,output 在 col 之后填充 col。如果你告诉每个元素站在哪里，网格可能会，但它需要知道它们有多大......
你不应该像这样定义一个固定的宽度。试试fr 单位
jsbin.com/cexejotiya/1/edit?html,css,js,output

标签： css flexbox

【解决方案1】：

这样的？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    .wrapper {
       column-count: 3;
      column-gap: 1.25rem;
    }
    .part {
       break-inside: avoid-column;
      position: relative;
      display: inline-block;
      width: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
    }
  </style>
</head>
<body>
  
  <div class="wrapper" style="height:100%; width:100%;">
    <div class="part p-3">1 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="part p-3">2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. t ever since the 1500s, when an unknown printer took a o make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="part p-3">3 dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="part p-3">4 industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="part p-3">5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  </div>
</body>
</html>

【讨论】：

【解决方案2】：

终于找到了这个神奇的词：“砌体”。这是线程：CSS float empty spaces

这里还有另一种方法：https://w3bits.com/css-masonry/

【讨论】：