2个Div并排出现的问题

Question

我有2个div嵌套在父div中，我无法弄清楚如何让它们并排出现。我已经尝试过浮动：左边为左边的div，而浮动：右边为正确的div，但没有用。显然，所有3个div中都设置了边缘，导致了崩溃。

以下是更正后的CSS：

#mid-feature
{
margin:350px 0 0 16px;
width:848px;
height:318px;
background-color:Olive;
position:relative;
overflow:hidden;  
}
#mid-featureleft
{
height:318px;
width:552px;
background-color:Purple;
float:left;
position:relative;
}
#mid-featureright
{
height:318px;
width:296px;
/*background-color:#B9C1CC;*/
background-color: red;
float:left;
position: relative;
}

以下是相关的HTML：

<div id="mid-feature">
    <div id="mid-featureleft">
        things<br />
        things<br />
        things<br />
        things<br />
        things<br />
        things<br />
        things<br />
    </div>
    <div id="mid-featureright">
        cosas
        <br />
        cosas
        <br />
        cosas
        <br />
        cosas
        <br />
        cosas
        <br />
        cosas
        <br />
    </div>
</div>            

Answer 1

#mid-feature
{
/*margin:350px 0 0 16px;*/
width:800px;
background-color:Olive;  
oveflow:hidden;
}
#mid-featureleft
{
/*margin:350px 0 0 16px;*/
background-color:Purple;
/*height:330px;*/
/*width:532px;*/
width: 300px;
float:left;
/*position:relative;*/
}
#mid-featureright
{
/*height:330px;*/
width:205px;
background: red;
float:right;
}

尝试使用上面的代码。我已经删除了主要div的边距和所有风格的位置。 编辑：还向主div添加了溢出。看看是否有帮助

Answer 2

诀窍是让渲染器看到没有向下移动第一个div的组合。

有一个很棒的网站，上面有关于here的教程。

Answer 3

问题是如果你将所有边距（左边和右边）和宽度相加，你就会超过800px的外包裹。试试这个。

#mid-featureleft
{
background-color:Purple;
height:330px;
width: 300px;
float: left;
}
#mid-featureright
{
height:330px;
width:205px;
background: red;
float:left;
}

另外不要忘记在内部div之后清除浮动

.clear{
  clear: both;
}

Answer 4

这个问题已被问过几次。这可能会有所帮助：CSS Problem to make 2 divs float side by side