Question

问题不是彼此相邻显示，而是所有人都有理由离开并将一个置于另一个之下。如果另一张牌不合适，我希望他们从左到右一直走到下一排。显示方式：flex工作。

是否有任何＆＃34;语义＆＃34;这样做的方法？我唯一能想到的是在网格中放置一个额外的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

您可以将每张卡弹出到自己的列中并使用可堆叠网格将其包围 - ＆gt; 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即可将该卡扩展为最大可用空间。

这是我能找到的。它工作得非常好，就像我需要它一样。

doubling给出了在中等屏幕上从每行4张卡片下降到2张卡片的良好效果，而stacking在用于手机等小屏幕上的每行2到1张可以获得终极观看乐趣。

感谢大家，您的答案有助于找到这个解决方案。我会将其标记为答案，因为我相信这是最具语义性的＃34;这样做的方式。

语义UI：彼此相邻的卡片？

2 个答案: