2 Divs并排显示的问题 [英] Problem with 2 Divs appearing side-by-side

问题描述

我有两个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>问题是如果你把所有的边距加起来（如果你把所有的边距加在一起，那么你就可以把它们加在一起）。（
 
左和右）和宽度，你比外包装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; 
} 
  
 
I have 2 divs nested within a parent div, and I cant figure out how to get these to appear side-by-side.  I've tried float:left for the left div, and float:right for the right div but to no avail.  Apparently the margins were set in all 3 divs which caused a meltdown.



Here is the corrected 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;
}
Here is the relevent 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>            

解决方案
The problem is if you add up all the margins (left and right) and the widths, you are more than the outer wrap of 800px.  try this.
#mid-featureleft
{
background-color:Purple;
height:330px;
width: 300px;
float: left;
}
#mid-featureright
{
height:330px;
width:205px;
background: red;
float:left;
}
Also don't forget to clear the float after the inner divs
.clear{
  clear: both;
}


                        
这篇关于2 Divs并排显示的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！