html - 并排内联两个 div - CSS

Question

我试图放置两个宽度分别为 50% 的 div，但不知何故它没有出现在同一行，但如果我放置 49%，它就会堆叠在同一行。任何人都可以告诉我我在代码中做错了什么(比解决方案更想知道原因)。

CSS -

* {
  padding: 0;
  margin: 0;
}
.wrapper {
  width: 100%;
}

.left-c {
  width: 50%;
  background: #3EF00C;
  display: inline-block;
}

.right-c {
  width: 50%;
  background: #2E4E6E;
  display: inline-block;
}

HTML -

<div class="wrapper">
    <div class="left-c">
        <p>LEFT ----- This is going to be some random text placed in a a left container inside the wrapper. I hope this text will suffice the requirement.</p>
    </div>
    <div class="right-c">
        <p>This is going to be some random text placed in a a right container inside the wrapper. I hope this text will suffice the requirement. ----- RIGHT</p>
    </div>
</div>

JS fiddle - https://jsfiddle.net/no0chhty/1/

Answer 1

这是 inline-block 类型元素的经典问题。不幸的是，他们考虑了文档空白，包括空白字符。对此有多种解决方案，但我倾向于使用的解决方案是将它们的父元素设置为 font-size: 0，然后将内联 block 上的字体大小重置为您想要的值。

在这里阅读更多相关信息:https://css-tricks.com/fighting-the-space-between-inline-block-elements/