html - 如何制作div内联 block ？

Question

我有以下html

<div class="main-conteiner">
    <div class="block">First</div>
    <div class="block">Second</div>
</div>

---

还有这个 CSS

.main-conteiner {
  width: 600px;
  margin: 0 auto;
}

.block {
  width: 50%;
  display: inline-block;
  background: red;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box; 
}

div {
  margin: 0;
  padding: 0;
}

---

我需要将两个 div 安排在同一行中。但相反，它分为两条线。我不知道我哪里做错了。

DEMO

Answer 1

Demo Fiddle

这是因为 inline-block 考虑到了 HTML 中的空白，只需删除两个元素之间的换行符即可。

修改后的 HTML

    <div class="main-conteiner">
        <div class="block">this is just a div</div><div class="block">this is another div</div>
    </div>

原因是内联元素以与文本相同的方式有效地考虑在内，新的行/换行符分隔将始终呈现为空白——除了 2*50% 之外，它还会使宽度达到大于 100%。

---

Alternative Solution

要停止将 HTML 中的换行符呈现为额外的空格，只需将容器上的 font-size 设置为 0，然后为子 div 设置 font-size >，这意味着渲染空间的大小为零，因此没有宽度，因此不会影响宽度计算。

.main-conteiner {
    width: 600px;
    margin: 0 auto;
    font-size:0;
}
.block {
    width: 50%;
    display: inline-block;
    background: red;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size:15px;
}
div {
    margin: 0;
    padding: 0;
}