语义UI，两列网格，右侧网格包含多个内联div标签

Question

这应该很容易，但出于某种原因，我必须遗漏一些超级基本的东西。

使用语义UI

我有一个简单的两列网格。左侧的第一列称为profileInfo，右侧的列称为profileData。 profileData包含多个使用“ui card”类的div。 div都出现在一个单独的行上，它们不是内联的。我试图设置ui卡类显示：inline-block并尝试使用float：left，但这不起作用。

profileData列中的数据是动态的，因此有时可能是1 ui卡或10 ui卡。但无论哪种方式，我希望他们内联并继续。我不希望每张ui卡都在一个单独的行上。希望这不是太混乱。非常感谢任何输入。

<div class="ui two column centered grid">
<div class="row">
  <div id = "profileInfo" class="column">
      <!-- some stuff in here -->
  </div>

  <div id = "profileData" class="column">
      <div class = "ui card">
      <div class = "ui card">
      <div class = "ui card">
  </div>
</div>
</div>

谢谢！

Answer 1

尝试包装你的＆＃34; ui卡＆＃34;在一个名为＆＃34; ui cards＆＃34;：

的div中

<div class="ui two column centered grid">
<div class="row">
  <div id = "profileInfo" class="column">
      test
  </div>

  <div id = "profileData" class="column">
    <div class="ui cards">
      <div class = "ui card">test</div>
      <div class = "ui card">test</div>
      <div class = "ui card">test</div>
    </div>
  </div>
</div>
</div>

ui.card设置为显示flex，内联块可以正常工作，但由于浏览器前缀，您的样式可能会被覆盖。

要连续实现3个，您可以覆盖它们上的px宽度：

.ui.cards>.card { width:31%; }

Codepen

Answer 2

我能够解决这个问题！

很简单，我不得不删除包含一类'ui容器'的额外div。