时间戳

首页 > 解决方案 > 用 css 列填充子元素的剩余高度

css - 用 css 列填充子元素的剩余高度

问题描述

我有将其内容分隔为 2 列的容器。是否可以在子部分中填充剩余高度，以便下一部分可以从下一列开始？或其他具有相同结果的方法。

jsfiddle

.container {
  height: 150px;
  width: 300px;
  background: #0ff;
  margin-top: 10px;
  overflow-x: scroll;
  column-count: 2;
  column-gap: 10px;
  padding: 5px;
}

.section:nth-child(odd) {
  background: rgb(91, 238, 116);
}
.section:nth-child(even) {
  background: rgb(182, 182, 212);
}
<div class="container">
  <div class="section">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores, 
  </div>
  <div class="section">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores, 
  </div>
  <div class="section">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores, 
  </div>
</div>

现在的样子 我希望它如何

标签： cssmultiple-columns

解决方案

只需添加一些边距。使其与高度相同，以确保它始终有效

.container {
  height: 150px;
  width: 300px;
  background: #0ff;
  margin-top: 10px;
  overflow-x: scroll;
  column-count: 2;
  column-gap: 10px;
  padding: 5px;
}

.section:nth-child(odd) {
  background: rgb(91, 238, 116);
}
.section:nth-child(even) {
  background: rgb(182, 182, 212);
}
.section:not(:last-child) {
  margin-bottom:150px;
}
<div class="container">
  <div class="section">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores, 
  </div>
  <div class="section">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores, 
  </div>
  <div class="section">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores, 
  </div>
</div>

推荐阅读