2 个 Div 并排出现的问题答案

【问题标题】：Problem with 2 Divs appearing side-by-side2 个 Div 并排出现的问题
【发布时间】：2011-02-28 04:46:42
【问题描述】：

我有 2 个 div 嵌套在一个父 div 中，我不知道如何让它们并排显示。我试过 float:left 为左 div，float:right 为右 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>

【问题讨论】：

“并排”是什么意思？它们是否都应该向左对齐并相互接触？或者你的意思是紫色的 div 接触包含框的左边缘，红色的 div 接触右边缘？是否应该增加 div 的宽度？
我的意思是紫色和红色应该并排，但红色低于紫色，是的，我必须通过并将位置更改为相对位置，以便其他图像高度重复

标签： css

【解决方案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 添加了溢出。看看有没有帮助

【讨论】：

它们并排出现，但也出现在上面的大照片后面。
所以我更改了中间特征的边距，使其显示在图像下方。感谢您的回答！

【解决方案2】：

问题是如果你把所有的边距（左右）和宽度加起来，你就超过了 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;
}

【讨论】：

我认为可能在所有三个 div 中都设置了边距。我本可以发誓我试过了，但现在至少它已经足够接近了。这样的剧情！一旦我弄明白了，我会重新发布代码。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：