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

它们是内联块，但通常在使用50％时，您不计算像素舍入和边距/填充。所以，实际上，50％将是50％+ 10px，这将导致下一个div不适合在同一行，打破线并将其降低到第一个div而不是它旁边。如果您使用Chrome的检查器或Firefox的Firebug检查元素，您会发现它不会占据整个宽度，只占它的一半以上。

Answer 2

您的边框计为元素大小的一部分，它是一个加法，而不是宽度100％的包含。这将导致内联元素向下移动到下一行。

盒子模型将所有部件加在一起以获得最终尺寸，包括填充和边距： http://www.w3.org/TR/CSS2/box.html

正常的问题是，当您指定边框1px时，实际上是在最终计算尺寸上添加了两个像素，一个在左边，一个在右边。

Answer 3

首先我要设置填充：0;和保证金：0;任何浏览器分配的填充（用户代理样式表 - 可以使用chrome中的inspect元素或Mozilla的firebug等），如果要浮动它们，则将它们向左浮动并随后清除浮点数。所以你有这样的事情：

.container{
    border: 1px solid green;
    width:100%;
}

.box1{
  margin: 0;
  padding: 0;
  float:left;
  width:50%;
  height:200px;
  background:red;
}

.box2{
  margin: 0;
  padding: 0;
  float:left;
  background:red;
  width:50%;
  height:200px;
}

应该做的伎俩。

为什么显示内联块不起作用？

3 个答案: