css - Div 并没有坐在一起

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)。

行内 block 元素就像文本流中的元素一样显示，这就是为什么在呈现它们时会考虑空白。

JSFiddle example