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

您需要 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，float: right不需要#two。

#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的#wrap伪元素上使用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就无法工作。

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

8 个答案:

Demo Fiddle