Question

我需要在线块中显示一些图像但在第一张图像之后有一个我无法删除的存储偏移，有人可以解释为什么图像有这种行为吗？

<div class="finitures">
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
</div>

的CSS：

    .finiture-img
{
    display:inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align:top;
    margin-right:10px;
    width:15%;
    overflow:hidden;
    clear:both;
}

.finiture-img img
{
    border: 1px solid #898886; 
    margin-top:2px; 
    cursor:pointer;
    width:100%;
    overflow:hidden;
}

.finitures {
    margin: 0;
    border-bottom: 1px solid #9c9b9b;
    padding-bottom: 20px;
    width:100%;
    margin-top:100px;
    clear:both;
    overflow:hidden;
}

.finitures:last-child
{
    border-bottom: none;
}

Answer 1

您没有正确关闭<div class="finitures">元素（至少在您提供的代码段中）。因此，添加结束</div>将解决您的问题，消除这种古怪的行为。（只有一些浏览器会尝试解释未关闭的标签）

您在代码段末尾错过了结束</div>代码，导致意外行为。

由于'整理'修复了这个问题，你几乎可以肯定它是你的HTML而不是css的错误：

只需确保每个开始标记都有相应的结束标记。这可能是</elementName>（或/>的形式，如果它是自闭元素，即图像）。

确保不执行此操作并提高可读性的一种好方法是正确缩进和布局html（以及css）。这将进一步允许您在需要的位置进一步修改标记。

我还想指出 html的布局也很重要。例如，将元素放置在彼此旁边可能会使它们与将它们放在另一个之下的方式不同。

看到这里，我正在使用完全相同的标记，但我已经放置了一个新行。看看它们的显示/渲染方式如何？

* {
  margin: 0;
  padding: 0;
}
div {
  display: inline-block;
  width: 50%;
  background: blue;
}
input {
  width: 50%;
  display: inline-block;
}

.now {
  width: 49.5%;
}

<br/><br/><br/>
<div class="now">Div on left</div><input class="now" type="text" placeholder="text here" />

<br/><br/><br/>
<div class="now">Div on left</div>
<input class="now" type="text" placeholder="text here" />

作为旁注你不需要clear:both; css属性，除非你浮动你的元素（我个人不喜欢浮动元素，它也可以得到凌乱）。大多数功能都可以通过使用定位来实现，这似乎是一个更好的选择恕我直言。

Answer 2

修改显示finiture类的方式

.finitures {
    ...
    display:table;
}

Answer 3

在.finiture-img类上显示：inline-block，而不是show：left属性。

什么是明确的：两个属性用于？你的代码中没有浮点数......

Answer 4

HTML中的换行符和空格使得内联元素具有不可见的边距。要解决这个问题，请：

删除不必要的换行符和空格。这就是整理小提琴工作正常的原因。
指定元素的负边距。这有点复杂，可能无法在所有平台上一致显示。

因此删除额外的空格可以解决问题。

请看这里：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

这个问题是关于同样的问题：carousel leaving pixels after moving

Answer 5

您连接了所有.finiture-img div（中间没有空格），但是您没有使用第一个和第二个。差别就是这样。

内嵌块显示图像的奇怪偏移

5 个答案: