两个宽度为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;
}

- VIRUS

---

你只浮动了其中一个。 将 #one 浮动到左边，它就可以工作了。 - Toby Osborne

或者在 #one, #two 中使用 display: inline-block; 也可以。 - Sifu

@师傅，只有在你注释掉它们之间的空格时才能工作。 - Pete

@ezaz？http://jsfiddle.net/rhn8u1pz/ - Sifu

真是疯狂，两个div之间的空格会导致“inline-block”被推下去...显然它并没有显示在任何地方，很烦人。 - Martin B.

Answer 1

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

JsFiddle演示

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

- Sifu

---

哦，它工作了！我就奇怪了，之前我做了两个页面用了 display:inline-block 但并没有起到作用，现在它却有效了。我有点困惑，不过还是谢谢你。 - VIRUS

可能是因为你没有注释掉两个div之间的空格。 - TylerH

@TylerH 如果你没有说，我永远不会理解这个。我完成了:D - VIRUS

Answer 2

演示 Fiddle

您需要同时将 #one 元素设置为 float:left，并将 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;
}

- SW4

Answer 3

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

 #one{float:left}

DEMO

- Suresh Ponnukalai

Answer 4

删除#two的CSS属性，并添加以下内容。

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

- undefinedtoken

---

@Sifu - 不会的...除非他们使用了绝对定位。 - Danield

Answer 5

使用 float: left 即可，不需要 float: right 来设置 #two。

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

#two
{
    background: red;
}

Fiddle 示例。

- rageit

---

这将把它们移动到应用于#wrap的边框之外。 - TylerH

Answer 6

你需要浮动两个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>

演示

- karan3112

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

尝试使用clearfix在您的#wrap div的:after伪元素上，以使内容更加清晰易懂。

演示

- Benjamin

---

为什么要这么复杂，当你可以使用内联块呢？ - Sifu

Answer 8

针对sifu的评论并以多种方式回答问题：

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

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

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

展示 Inline-block 方法

#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开发（不确定为什么会这样），那么第二种方法将无法工作。

- Toby Osborne

---

请不要抄袭他人的答案并将其作为自己的答案发布，即使是为了将它们合并成一个答案。新的答案应该提供解决问题的新方法。 - TylerH

方法2使用简单的CSS hack：{display:inline-block; *display: inline; zoom: 1;} - Sifu

师傅 - 谢谢，我自己不知道，感激不尽。- 如果你觉得我抄袭了你的答案，很抱歉。@TylerH - 如果您看一下我们的答案，它们并不完全相同；我们以不同的方式解决了空格问题。 我提到了师傅的答案，因为它们有相似之处，并且我注意到他在这个问题上发表了评论，似乎因为一个完全正确的答案而感到疲惫。 我道歉。 - Toby Osborne