logo标签列表

如何在 Bulma (flexbox) 中使几行的列高度相等？

cssflexboxbulma
4

我正在使用Bulma 0.4.0，尽管答案可能与Bulma本身无关。

如何将列高设置为相等？（见下面的codepen）
请注意，它们都在另一个列容器中，并且有几行这些列。
期望的行为：（哇，我制造了光学错觉） enter image description here

https://codepen.io/anon/pen/JNKexr

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
</head>
<body>

<div class="columns">
 <div class="column">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu consectetur lorem, nec facilisis dolor. Morbi rhoncus, mi sit amet ornare tincidunt, augue sem aliquet mauris, non pretium orci nisl at est. Curabitur placerat pharetra augue. Etiam non eros nulla. Praesent aliquet sem dui, id varius enim convallis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis mauris felis, sit amet consectetur augue sollicitudin id.
  </div>
<div class="column">

  <div class="columns">
  <div class="column">
    <p class="notification is-info">Lorem ipsum</p>
  </div>
  <div class="column">
    <p class="notification is-success">Nulla a mauris vel </p>
  </div>
  </div>


  <div class="columns">
  <div class="column">
    <p class="notification is-info">Lorem ipsum</p>
  </div>
  <div class="column">
    <p class="notification is-success">Nulla a mauris vel </p>
  </div>
  <div class="column">
    <p class="notification is-warning">Pellentesque
</p>
  </div>
  <div class="column">
    <p class="notification is-danger">Morbi turpis nunc</p>
  </div>
</div>

<div class="columns">
  <div class="column">
    <p class="notification is-info">Lorem ipsum dolor sit amet</p>
  </div>
  <div class="column">
    <p class="notification is-success">Nulla</p>
  </div>
  <div class="column">
    <p class="notification is-warning">Pellentesque eros tortor,
</p>
  </div>
  <div class="column">
    <p class="notification is-danger">Morbi</p>
  </div>
</div>

<div class="columns">
  <div class="column">
    <p class="notification is-info">Lorem ipsum dolor sit amet</p>
  </div>
  <div class="column">
    <p class="notification is-success">Nulla</p>
  </div>
  <div class="column is-6">
    <p class="notification is-warning">Pellentesque eros tortor,
</p>


</div>
</div>

</body>
</html>

问题与我的先前问题有关：如何在Bulma（flexbox）中将列高度设置为最长列？

现在你已经用第二个CodePen替换了第一个。当你提问时，放置一个适当的示例非常重要，如果你需要更改它，以至于给出的答案将会失效并停止工作，那么你需要保持原样并发布一个新问题。由于你的编辑导致我的答案失效，我已经删除了它，所以你不需要编写新答案，而且我也不会立即添加新答案，因为我需要离开，但我相信其他人会帮助你的 :) - Asons
是的，对不起。我会记住的。谢谢你的努力 :) - curious
你的问题是要设置等高还是设置最高的一个的高度？ - RacoonOnMoon
@Traver 我原本认为将最高的高度设置为更具响应性，但现在我认为我错了。所以，等高度。我将会更正第一篇帖子。 - curious
2个回答
4

尝试添加CSS代码：

p.notification {
    height: 100%;
}
2
我知道这违反了规则，但这并不能阻止我说“非常感谢你！” :) 如此简单... Sergey，祝你有美好的一天 :) - curious
1
我使用了以下的CSS规则，这样我就可以使用类.is-equal-height来使列对齐。
.columns.is-equal-height > .column > * {
    height: 100% !important;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接