代码之家 › 专栏 › 技术社区 › Armeen Moon

如何使元素按父元素的高度在列中流动

css html javascript

Armeen Moon · 技术社区 · 6 年前

如何在列中布局项目,使其填满列,然后换行。

实时代码: https://codepen.io/matthewharwood/pen/NWxqXVv

.column-wrapper {
  height: 250px;
  background: #000;
  color: #fff;
  display: flex;
}
.column-element {
  padding: 12px;
}
h1 {
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #cacaca;
  opacity: .75;
  font-size: 12px;
}
p {
  font-family: sans-serif;
  font-size: 16px;
  margin: 4px 0;
}

<div class="column-wrapper">
  <div class="column-element">
    <h1>Collaborators</h1>
    <p>Joe</p>
    <p>Karen</p>
    <p>Randy</p>
  </div>
  <div class="column-element">
    <h1>Company</h1>
    <p>R/GA</p>
    <p>Uber</p>
  </div>
  <div class="column-element">
    <h1>Technology</h1>
    <p>React</p>
    <p>FusionJS</p>
    <p>Styletron</p>
    <p>Baseweb</p>
    <p>Webpack</p>
    <p>Cloudinary</p>
  </div>
  <div class="column-element">
    <h1>Profession</h1>
    <p>Software Engineer</p>
    <p>Designer</p>
    <p>HR</p>
    <p>CEO</p>
    <p>CTO</p>
  </div>
  <div class="column-element">
    <h1>Dates</h1>
    <p>June 3 2018 ~ Aug 28 2018</p>
  </div>
    <div class="column-element">
    <h1>My Role</h1>
    <p>Software Engineer</p>
  </div>
</div>

所需布局:

'.column-element' <p /> 或 <h1 /> 如果我们要转到下一个专栏,我希望他们转到下一个专栏。因此,使用 column-count

1 回复 | 直到 6 年前

Rahul 6 年前

在您的应用程序中执行以下更改: CSS 财产:

.column-wrapper {
    height: 250px;
    background: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.column-wrapper {
  height: 250px;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.column-element {
  padding: 12px;
}
h1 {
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #cacaca;
  opacity: .75;
  font-size: 12px;
}
p {
  font-family: sans-serif;
  font-size: 16px;
  margin: 4px 0;
}

<div class="column-wrapper">
  <div class="column-element">
    <h1>Collaborators</h1>
    <p>Joe</p>
    <p>Karen</p>
    <p>Randy</p>
  </div>
  <div class="column-element">
    <h1>Company</h1>
    <p>R/GA</p>
    <p>Uber</p>
  </div>
  <div class="column-element">
    <h1>Technology</h1>
    <p>React</p>
    <p>FusionJS</p>
    <p>Styletron</p>
    <p>Baseweb</p>
    <p>Webpack</p>
    <p>Cloudinary</p>
  </div>
  <div class="column-element">
    <h1>Profession</h1>
    <p>Software Engineer</p>
    <p>Designer</p>
    <p>HR</p>
    <p>CEO</p>
    <p>CTO</p>
  </div>
  <div class="column-element">
    <h1>Dates</h1>
    <p>June 3 2018 ~ Aug 28 2018</p>
  </div>
    <div class="column-element">
    <h1>My Role</h1>
    <p>Software Engineer</p>
  </div>
</div>