CSS两盒不能分割父母的宽度为100％

这里是JS提琴：http://jsfiddle.net/nettrinity/8YXsQ/CSS两盒不能分割父母的宽度为100％

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

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

谢谢！

来源

2014-02-24 Nicolas S.Xu

是的，我该如何删除这个差距？ –

请尝试：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; 
}

来源

2014-02-24 16:22:26 Marcel

如果更新链接，其他人可能看不到问题。 –

您已设置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作为子元素，并查看最适合您需求的项目。

来源

2014-02-24 16:24:48 skreborn

在'float'上使用'inline-block'有很多原因，一个不应该比另一个更受欢迎。他们都有自己的问题......使用其中一个或另一个将完全取决于试图实现的效果。 –

感谢您的提示。这让我想起另一个关于李元素之间差距的痛苦难题。 –

@Paulie_D你是完全正确的，好点。我会相应地修改我的答案。 – skreborn

您可以将间距设置字体大小清除为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 */ 
}

来源

2014-02-24 16:24:56

删除divs之间的换行符的伎俩：

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

见updated fiddle

另一种方法是删除字体大小：

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

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

来源

2014-02-24 16:28:28 soyuka

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

A Space between Inline-Block List Items

总之，作为skreborn说，内联和行内块元素不会是0的差距，即使你设置边框，margin和padding为0

也许这不是假设。修复它的方法是将父字体大小设置为0.（重新设置子元素的宽度，字体大小或高度，如果它们相互碰撞）

来源

2014-02-24 16:50:23

CSS两盒不能分割父母的宽度为100％

回答

相关问题