Question

使用下面的代码，我得到了垂直卡片，一个在另一个上面：

<div class="ui container">
      <div class="ui card">
        <div class="card header">
        Card1
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card2
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card3
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card4
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card5
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card6
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card7
        </div>
      </div>
      <div class="ui card">
        <div class="card header">
        Card8
        </div>
      </div>
</div>

检查this fiddle here

我需要的是无限地将这些卡并排放置。如果卡片的总宽度超过了窗口宽度，那么一个horiontal bar应该允许我水平滚动，但是卡片绝对不能放在另一个卡片下面。

如何在语义UI中实现这一目标？使用网格会限制我的卡数，因此必须有另一种我不知道的解决方案。

感谢您的帮助。

Answer 1

试试这个

.ui.container {
  overflow: auto;
  white-space: nowrap;
}
.ui.card {
  display: inline-block;
}

Answer 2

在这里大声思考，但是对于HTML的当前配置，我认为它可能是默认布局阻止格式。要解决此问题，请尝试以下更改，同时允许水平滚动：

.ui.card { display: inline-block; overflow-x: scroll; }

添加溢出滚动应该为您的卡添加水平滚动机制。希望这有帮助！

语义UI横向卡

2 个答案: