两个 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 Demo

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;
    display: inline-block;
    /* If worried about IE7 and IE6, add the two next lines */
    *display: inline;
    *zoom: 1;
}

#two
{
    background: red;
}

Answer 2

Demo Fiddle

您需要both float:left #one 元素以及将 overflow:hidden 设置为父元素以确保它正确包裹子元素。

将您的 CSS 更改为：

#wrap
{
    max-width: 400px;
    margin: auto;
    border: 2px solid black;
    overflow:hidden; /* <---ensure the parent wraps the children */

}

#one, #two
{
    width: 50%;
    background: green;
    float:left; /* <---ensure the children display inline */
}

#two
{
    float: right;
    background: red;
}

Answer 3

在您的 CSS 中添加以下样式。

 #one{float:left}

DEMO

Answer 4

删除 #two 的 Css 属性并添加此

#one, #two
{
    width: 50%;
    background: green;
    float: left;
}

Answer 5

您需要浮动两个 div。在浮动之后，使用 clearfix 类清除浮动。

CSS：

#one, #two{ float:left; }

.clearfix:after {
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0;
 }

HTML：

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

DEMO

Answer 6

使用float: left，而#two 不需要float: right。

#one, #two
{
    width: 50%;
    background: green;
    float: left;
}

#two
{
    background: red;
}

Fiddle 示例。

Answer 7

#wrap
{
    max-width: 400px;
    margin: auto;
    border: 2px solid black;
}
#wrap:after{
    clear:both;
    content:"";
    display:block;
}

#one, #two
{
    width: 50%;
    float:left;
    background: green;
}

#two
{
    background: red;
}

试试这个并在 :after div 的 :after 伪元素上使用 clearfix。

DEMO

Answer 8

扩展sifu的评论并以多种方式回答问题

第一种方法（使用浮点数）

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

http://jsfiddle.net/tfvdzzee/7/

显示内联块方法

#wrap
{
   max-width: 400px;
   margin: auto;
   border: 2px solid black;
   font-size:0px;
}
#one,#two
{
   width:50%;
   display:inline-block;
   font-size:16px;
}

http://jsfiddle.net/tfvdzzee/8/

这两种方法都可以使用，但是如果您仍在为 IE7 开发（不知道为什么要这样做），那么方法 2 将不起作用。