html - 设置元素列的样式，行之间没有 akward 间距

Question

所以我必须制作一组任意数量的复选框，按列排列。我似乎无法弄清楚如何在不指定高度的情况下做到这一点，所以我使用 flexbox 来制作行，但是当有包含多行文本的元素时，这将不起作用。这将创建我不想要的垂直间距。有什么干净的建议可以解决这个问题吗？在屏幕截图中，我显示了我现在所在的位置，每个字段之间的垂直间距应该是均匀的。

.filter-fields-container {
  display: flex;
  overflow-y: scroll;
  max-height: 350px;
  flex-wrap: wrap;
}

.filter-fields-container  > .field {
  flex: 1 0 33%;
}

.

<div class="container">
  <div class="field">
    <label>
      <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAccusamus" name="Inputs" type="checkbox" value="Accusamus quam dolorum error" /> <span>Accusamus quam dolorum error</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputNumquam" name="Inputs" type="checkbox" value="Numquam modi" /> <span>Numquam modi</span> </label>
  </div>
</div>

Answer 1

你可以尝试column-fill:

.container {
  -webkit-column-count:3;
     -moz-column-count:3;
          column-count:3;
  -webkit-column-fill:balance;
     -moz-column-fill:balance;
          column-fill:balance;
  width:100%;
}
.field {
  display:inline-block;
  width:100%;
}

/* extra ? */
input {
  float:left;
  }
span {
  display:block;
  overflow:hidden;
  }
 

<div class="container">
  <div class="field">
    <label>
      <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAccusamus" name="Inputs" type="checkbox" value="Accusamus quam dolorum error" /> <span>Accusamus quam dolorum error</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputNumquam" name="Inputs" type="checkbox" value="Numquam modi" /> <span>Numquam modi</span> </label>
  </div> <div class="field">
    <label>
      <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> </label>
  </div>
</div>

结果大部分时间是所需的平均输出 codepen to play with, (add/remove elements)

---

对于 flex，您需要设置宽度并允许元素向下环绕，它将逐行填充而不是逐列填充。

.container {
  display: flex;
  flex-wrap: wrap;
}
.field {
  width: 33%;
}
/* extra ? */

input {
  float: left;
}
span {
  display: block;
  overflow: hidden;
}

<div class="container">
  <div class="field">
    <label>
      <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAccusamus" name="Inputs" type="checkbox" value="Accusamus quam dolorum error" /> <span>Accusamus quam dolorum error</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputNumquam" name="Inputs" type="checkbox" value="Numquam modi" /> <span>Numquam modi</span> 
    </label>
  </div>
  <div class="field">
    <label>
      <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> 
    </label>
  </div>

  <div class="field">
    <label>
      <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> 
    </label>
  </div>
</div>