两个 50% 宽度的 div 不适合父级

Question

抱歉，如果它是重复的，我已经诚实地搜索过，但我仍然遇到这个小提琴中显示的问题：http ://jsfiddle.net/tfvdzzee/1/

代码在这里：

html

<div id="wrap">
    <div id="one">1</div>
    <div id="two">2</div>
</div>

CSS

#wrap
{
    max-width: 400px;
    margin: auto;
    border: 2px solid black;
}
#one, #two
{
    width: 50%;
    background: green;
}
#two
{
    float: right;
    background: red;
}

Answer 1

我相信display: inline-block;这是最好的答案，因为它可以防止重叠和溢出的错误，同时还保留其父定义。

JsFiddle 演示

超文本标记语言

<div id="wrap">
    <div id="one">1</div><!--
 --><div id="two">2</div>
</div>

CSS

#wrap
{
    max-width: 400px;
    margin: auto;
    border: 2px solid black;
}

#one, #two
{
    width: 50%;
    background: green;
    display: inline-block;
    /* If worried about IE7 and IE6, add the two next lines */
    *display: inline;
    *zoom: 1;
}

#two
{
    background: red;
}