`JSFiddle example`

Question

我有两张图像，我想在父div中彼此坐在一起，但我不能让他们这样做。

.column {width:100%;max-width:1500px; margin:0 auto; }

.span_1_of_2 {width:50%; display:inline-block; }

.span_2_of_2 {width:50%;display:inline-block; }

https://jsfiddle.net/87xzwj5t/

Answer 1

这是让你进入的白色空间。

添加此CSS：

.column { font-size: 0; }
.column > div { font-size: 1rem; /* Or whatever you want it to be */ }

它会解决你的问题。

font-size: 0确保不渲染空白区域，然后font-size: 1rem将子div中的字体重置为文档根目录中设置的字体（默认情况下为16px in大多数浏览器）。

内联块元素的显示方式与文本流中的元素一样，这就是渲染白色空间时所遵循的原因。

`JSFiddle example`

Answer 2

删除html中的空格，我会工作

.column {width:100%;max-width:1500px; margin:0 auto; }

.span_1_of_2 {width:50%; display:inline-block; }

.span_2_of_2 {width:50%;display:inline-block; }

<div class="column">
<div class="span_1_of_2">Div 1</div><div class="span_2_of_2">Div 2</div>
</div>

Answer 3

问题在于display:inline-block因为空白而向div添加约4px个边距。如果您仍想使用它，您可以执行以下操作：

.span_2_of_2 {width:50%; display:inline-block; margin-left:-4px; }

修改

乔希所说的可能是真的。你为什么不漂浮它们？像这样：

.span_1_of_2 {width:50%;float:left; } .span_2_of_2 {width:50%;float:left; }

然后当然要清除漂浮物。

Answer 4

只需将float:left;添加到第一个span

即可

<强> CSS

.span_1_of_2 {
    width:50%;
    display:inline-block;
    float:left;
}

这是交易：一系列像你一样格式化的内联块元素通常格式HTML将在它们之间有空格。这就是为什么有两个跨度和它们之间的差距你将超过100％。

<强> DEMO HERE

Div没有在一个包裹内坐在一起

4 个答案:

`JSFiddle example`