html - 如何使用 flexbox 在 HTML 中排列多个包装列？

<分区>

我正在尝试在 flexbox 中获取多个包装的元素列。我的 HTML 中有两列元素，分别称为 colA 和 colB。 colA 不适合容器的高度，因此它包裹在 colA1 和 colA2 中。我的问题是 colB 最终位于 colA2 之上，而不是像我期望的那样位于其右侧。这是一个例子。我将 colA 涂成橙色，将 colB 涂成蓝色。您可以看到 colA 包裹在 colB 下方(并且溢出列根本不使用 bg 颜色——也许相关？)

.row {
  display: flex;
  flex-direction: row;
}
.column {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 80px;
}
.item {
  padding: 5px;
}
#colA {
  background: rgba(100%, 50%, 0%, 1.0);
  border: dotted;
}
#colB {
  height: 100px;
  background: rgba(00%, 50%, 100%, 0.5);
  border: dashed;
  opacity: 50%;
}

<div class="row">
<div class="column" id="colA">
  <div class="item">ColA thing1</div>
  <div class="item">ColA another thing</div>
  <div class="item">ColA what is this?</div>
  <div class="item">ColA keep going</div>
  <div class="item">ColA still here?</div>
  <div class="item">ColA wrap wrap</div>
</div>
<div class="column" id="colB">
  <div class="item">Column B something</div>
  <div class="item">Column B another thing</div>
</div>
</div>

最佳答案

您的#colA 没有设置高度，将其设置为自动，内容将适合。

.row {
  display: flex;
  flex-direction: row;
}
.column {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 80px;
}
.item {
  padding: 5px;
}
#colA {
  background: rgba(100%, 50%, 0%, 1.0);
  border: dotted;
  height:auto;
}
#colB {
  height: 100px;
  background: rgba(00%, 50%, 100%, 0.5);
  border: dashed;
  opacity: 50%;
}

<div class="row">
<div class="column" id="colA">
  <div class="item">ColA thing1</div>
  <div class="item">ColA another thing</div>
  <div class="item">ColA what is this?</div>
  <div class="item">ColA keep going</div>
  <div class="item">ColA still here?</div>
  <div class="item">ColA wrap wrap</div>
</div>
<div class="column" id="colB">
  <div class="item">Column B something</div>
  <div class="item">Column B another thing</div>
</div>
</div>

关于html - 如何使用 flexbox 在 HTML 中排列多个包装列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52989956/

上一篇：javascript - 如何使用图片作为提交按钮触发php函数

下一篇：html - Navbar 品牌在 bulma 上被拉伸(stretch)

相关文章：

html - 如何移除滚动条并让其他元素出现在我的 <div> 顶部？

html - 如何居中对齐导航栏

html - 使用 Bootstrap 4 和 Flex-Container 进行一些设计

html - 在悬停时设置嵌套 li 元素的 "entire row"的背景颜色

javascript - 有没有办法获取 Icecast 流的广播状态？

javascript - 当它换行到新行时，我可以将 CSS 应用于 flex-item 吗？

html - 在 Chrome 上缩小时不会出现 CheckBox

css - 防止一行中的多个 span 重叠(Clojure 打嗝代码但纯 css 相关)

javascript - 2 列网络到 1 列移动，带有动态高度框

html - 两列，隐藏一列时，另一列展开全宽