Question

我有一个带有一系列块的HTML模板，它们只是“内联块”。最初，许多块都会呈现为模板的一部分，但是用户可能会添加其他块，然后动态添加这些块。

我的问题是动态添加的块与预渲染块的间距不同。

很明显，由Javascript代码动态添加的块不会垂直排列。

HTML：

<div id="blocks">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

CSS：

#blocks {
  width:140px;
}
#blocks div.block {
  display:inline-block;
  *display:inline; // Legacy IE love
  zoom:1;
  vertical-align:top;
  width:20px;
  height:20px;
  margin:5px;
  border:1px solid red;
  background:1px solid #777;
}

似乎罪魁祸首是固有的（和不可见的）字符间距，因为inline-block使元素表现出类似于文本的排序。在font-size: 0元素上设置#blocks可以神奇地解决问题。但是，div.blocks元素中包含的文本的字体大小必须调整大小。

有没有人对此有一个很好的解决方法？

浮动元素（例如float: left;）不是理想的替代方案。

Answer 1

这是因为HTML中的每个div之间都有一个新行。这使浏览器认为需要在每个元素之间添加一个空格。

删除间距或将font-size:0;添加到父div。

选项1的小提琴： https://jsfiddle.net/Lu0xw1b6/

提示选项2： https://jsfiddle.net/fkcb5mrw/

Answer 2

在flexbox div上使用blocks，然后你去！

#blocks {
    display: flex;
    flex-wrap: wrap;
}

请参阅小提琴here。

Answer 3

您好试试这段代码。

#blocks {
  width:140px;
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  *word-spacing: -0.43em;
}
#blocks .block {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    width:20px;
    height:20px;
    margin: 0 5px 5px;
    border:1px solid red;
    background:1px solid #777;
}

问候：）

动态添加的内联块div具有错误的垂直间距

3 个答案: