删除 HTML/CSS 磁贴之间的奇数间距 [关闭]答案

【问题标题】：Remove odd spacing between HTML/CSS tiles [closed]删除 HTML/CSS 磁贴之间的奇数间距 [关闭]
【发布时间】：2016-03-01 04:30:03
【问题描述】：

这是间距看起来的屏幕截图，我正在寻找一种显示模式，以使所有内容都适合他们可以在不制作新行的情况下。

这就是它的样子，但理想情况下我希望左侧没有间隙

我只是在寻找一个显示设置来解决这个问题（例如 display:whatever ;）

感谢任何帮助;D

【问题讨论】：

您能否提供一个 JSFiddle 以便我们可以看到您正在尝试的代码...这里没有人会为您重新编写您的布局。谢谢:)
我认为不需要它，我只是补充说我只是想为整个文件使用一个显示设置，这样看起来会更好。
你应该可以使用display: inline-block
创建一个最小、完整和可验证的示例：stackoverflow.com/help/mcve
@Alex 谢谢你解决了我的问题，现在看起来好多了：D

标签： html css display

【解决方案1】：

如果您使用的是 Bootstrap，则可以使顶行面板适合

<div class="row">

您想要的下一行需要位于另一个“行”类中。代码应如下所示：

<div class="row">
  <div id="one" class="col-sm-2 panel panel-default">
    <div id="oskartommy"></div>
  </div>
  <div id="two" class="col-sm-2 panel panel-default">
    <div id="rorum"></div>
  </div>
  <div id="three" class="col-sm-2 panel panel-default">
    <div id="itsaka"></div>
  </div>
  <div id="four" class="col-sm-2 panel panel-default">
    <div id="mylittle"></div>
  </div>
  <div id="four" class="col-sm-2 panel panel-default">
    <div id="meow"></div>
  </div>
  <div id="six" class="col-sm-2 panel panel-default">
    <div id="lil_toxic"></div>
  </div>
</div>

<div class="row">
  <div id="one" class="col-sm-2 panel panel-default">
    <div id="joa"></div>
  </div>
  <div id="two" class="col-sm-2 panel panel-default">
    <div id="oskatommy"></div>
  </div>
  <div id="three" class="col-sm-2 panel panel-default">
    <div id="bausz"></div>
  </div>
  <div id="four" class="col-sm-2 panel panel-default">
    <div id="bntlol"></div>
  </div>
  <div id="four" class="col-sm-2 panel panel-default">
    <div id="flom"></div>
  </div>
  <div id="six" class="col-sm-2 panel panel-default">
    <div id="m0ew_tv"></div>
  </div>
</div>

尝试使用类似的方法来组织您的面板。我将所有列设置为 2 列宽，只是为了均匀分布，但您可以使用 12 列响应式网格系统重新排列，但是您需要。

【讨论】：