0

对不起这个非常基本的问题。

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

        .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% 以下会使它们对齐。

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

.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;

}

我想知道宽度是否均分，为什么不显示它们的原因？

4

3 回答 3

2

您的边框算作元素大小的一部分，它是 100% 宽度中的添加而不是包含。这将导致内联元素向下移动到下一行。

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

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

于 2013-07-08T09:32:35.363 回答
2

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

于 2013-07-08T09:31:17.507 回答
1

首先我会设置 padding: 0; 和边距：0；如果有任何浏览器分配的填充（用户代理样式表 - 这可以使用 chrome 中的检查元素或 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;
}

应该做的伎俩。

于 2013-07-08T09:36:34.573 回答