html - 为什么显示内联 block 不起作用？

Question

很抱歉这个非常基本的问题。

我有这两个包含宽度均匀的盒子-

        .box1
        {
        width:50%;
        height:200px;
        }

        .box2
        {
        width:50%;
        height:200px;
        }

这是这些盒子的容器 div-

.container
{
    border:1px solid green;
    display:inline-block;
    width:100%;
  }

我想知道什么时候容器 div 的宽度为 100% 并且它的容器 divs 被平均分配为宽度的 50%。那么在将它们对齐后，为什么不对齐呢？然而，将宽度减少到 50% 以下会使它们对齐。

虽然如果我将它们与 float 属性对齐，它会显示为内联 -

.container
{
    border:1px solid green;
    display:inline-block;
    width:100%;
  }
.box1
{
   float:right;
    width:50%;
       height:200px;
    background:red;
}
.box2
{
    float:right;
    background:red;

    width:50%;
    height:200px;

}

我想知道为什么不显示内联宽度是否均等的原因？

Answer 1

它们是行内 block ，但通常当使用 50% 时，您不会计算像素舍入 和边距/填充。所以，实际上，50% 将是 50% + 10px，这将导致下一个 div 不适合在同一行中，打破该行并将其放在第一个 div 下方而不是并排放置。如果您使用 Chrome 的检查器或 Firefox 的 Firebug 检查元素，您会注意到它并没有占据整个宽度，只占据了一半以上。