【问题标题】: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 列响应式网格系统重新排列,但是您需要。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-10-01
    • 2013-07-01
    • 1970-01-01
    • 2017-03-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-11-20
    相关资源
    最近更新 更多