Question

这是JS小提琴：http://jsfiddle.net/nettrinity/8YXsQ/

<div class="outer-box">
    <div class="inner-one">30%</div>
    <div class="inner-two">70%</div>
</div>

我希望他们划分100％，但总是有差距。它是什么？因为我将所有边距，填充和边框设置为0.这是一个错误吗？

谢谢！

Answer 1

您已将div元素设置为inline-block，这会使它们像简单文本一样运作。你在他们之间看到的是一个简单的空间。如果您从中删除换行符，并将第二个div的宽度设置为70%，则会得到正确的结果。

http://jsfiddle.net/8YXsQ/9/

<div class="outer-box">
    <div class="inner-one"></div><div class="inner-two"></div>
</div>

无论如何，inline和inline-block有一些替代方案可以将元素放在一起。尝试使用float:left或display:table作为父级，display:table-cell作为子元素，并查看最符合您需求的内容。

Answer 2

请尝试：float：left; （我更新了我的jsfiddle链接！）

http://jsfiddle.net/8YXsQ/8/

CSS：

    .outer-box {
    width:200px;
    background-color: #ccc;
    height:30px;
    margin:0;
    padding:0;
    border:0;
}
.inner-one {
    width:30%;
    background-color: yellow;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    display:inline-block;
    float:left;
}
.inner-two {
    width:70%;
    background-color: green;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    display:inline-block;
}

Answer 3

您可以将间隙设置字体大小擦除为0并恢复正常。 http://jsfiddle.net/8YXsQ/3/

.outer-box {
    width:200px;
    background-color: #ccc;
    height:30px;
    margin:0;
    padding:0;
    border:0;
    font-size:0;
}
.inner-one {
    width:30%;
    background-color: yellow;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    display:inline-block;
    font-size:14px;
}
.inner-two {
    width:70%;
    background-color: green;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    display:inline-block;
    font-size:14px;
}

或删除html中的空格

<div class="outer-box">
    <div class="inner-one"></div><!--
    --><div class="inner-two"></div>
</div>

或

<div class="outer-box">
    <div class="inner-one"></div><div class="inner-two"></div>
</div>

您也可以使用display:table; http://jsfiddle.net/8YXsQ/11/

.outer-box {
    width:200px;
    display:table;
    border-collapse:collapse;
}
.inner-one, .inner-two {
    display:table-cell;
    background:green;
}
.inner-one {
    width:30%;
    background:yellow;
    height:1.2em; /* in case tested with no content */
}

Answer 4

删除divs之间的换行符可以解决问题：

<div class="outer-box">
    <div class="inner-one"></div><div class="inner-two"></div>
</div>

请参阅updated fiddle

另一种方法是删除font-size：

.outer-box {
    font-size:0;
}

或者只使用float:left代替display:inline-block ...

Answer 5

我正在回答我自己的问题。这个问题与这个问题密切相关：

A Space between Inline-Block List Items

简而言之，正如斯克雷伯恩所说，即使您将边框，边距和填充设置为0，内联块和内联块元素也不会是0间隙。

也许不应该这样。修复它的方法是将父字体大小设置为0.（如果它们崩溃，则重新设置子元素的宽度，字体大小或高度）

css两个盒子不能分割100％的父宽度

5 个答案: