内联块元素不在其他内联块元素之后定位

Question

我有两个inline-block元素。两者都是50％宽度。我们将它们称为左右div。

右display:none;元素是两个不同图像的组合。事情只是一次显示一个图像，因为我将两个中的一个设置为company-information-block2-2 。其中一个图像显示在1000px - 1400px视口。问题是，该图像不会出现在左侧div之后。它是这样做的：

除了1000 - 1400之外的每个其他视口中的图像都可以正常工作。

这应该是这样的：

这是fiddle

有问题的图像（div）是

B

Answer 1

您已为每个元素指定了50％的宽度。

.section-blocks {
  width: 50%;
  height: auto;
  display: inline-block;
  vertical-align: top;
}

为了让它们出现在同一条线上，它们之间一定不能有空格。元素之间的任何额外空间都会将右边的元素向下撞到下一行。

在你的jsFiddle中，两个.section-blocks元素之间有一个空格 - 它将右边的图像撞到下一行。如果你消除了空间，那么它们将很好地坐在同一条线上。

这是一个有效的例子： 的 https://jsfiddle.net/fbc0y3qs/1/

如果一个标签结束，另一个标签必须立即开始：

</div><div id="company-information-block2" class="section-blocks">

应用float:left;也可以获得相同的最终结果，但它可能会对元素的宽度产生不良影响。 float:left;更改的不仅仅是元素的位置。

Answer 2

它将通过float来解决。

试试这个我确定它有帮助。

.section-blocks {
    float: left;
}