语义UI：卡片彼此相邻？

Question

问题是它们不是并排显示，而是向左对齐并一个放在另一个下面。如果另一张卡片不适合，我希望它们从左到右一直走并换行到下一行。 display: flex 的工作方式。

有什么"semantic"方法可以做到吗？我唯一能想到的就是在网格内放置一个额外的 div，这将是一个弹性容器。

我正在使用 Meteor 和 Blaze，但我认为这与它无关。问题出在语义 UI 和 HTML/CSS.

我的 HTML 看起来像这样：

<div class="ui grid">
    <div class="two wide column">
    </div>

    <div class="twelve wide column">
        {{> card}}
        {{> card}}
        {{> card}}
        {{> card}}
        {{> card}}
        {{> card}}
    </div>

    <div class="two wide column">
    </div>
</div>

每个卡片模板所在的位置：

<div class="ui card">
    <div class="image">
        <img src="http://placehold.it/256x256">
    </div>
    <div class="content">
            <a class="header">Kristy</a>
        <div class="meta">
            <span class="date">Joined in 2013</span>
        </div>
        <div class="description">
            Kristy is an art director living in New York.
        </div>
    </div>
    <div class="extra content">
        <a>
            <i class="user icon"></i>
            22 Friends
        </a>
    </div>
</div>

Answer 1

您可以将每张卡片放入其自己的列中，并使用可堆叠的网格围绕它 -> http://semantic-ui.com/collections/grid.html#stackable

<div class="ui stackable twelve column grid">
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
</div>

并且每张牌都被

包围

<div class="column">
   ... content
</div>

Answer 2

<div class="ui four doubling stackable cards">
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
</div>

对于卡片，您需要做的就是将 ui card 更改为 ui fluid card，以便卡片扩展到最大可用 space。

这是我能找到的。效果很好，正是我需要的。

doubling 在中等屏幕上从每行 4 张卡片减少到 2 张卡片的效果很好，而 stacking 在手机等小屏幕上从每行 2 张卡片减少到 1 张卡片以获得最终观看效果很高兴。

感谢大家，你们的回答有助于找到这个解决方案。我会将其标记为答案，因为我相信这是最 "semantic" 的方式。

语义UI：卡片彼此相邻？

Semantic UI: Cards next to each other?

html

css

flexbox

semantic-ui