如何让div不会与父div内的另一个div重叠 [英] How to make div not overlap another div inside parent div

问题描述

所以基本上我有mainDiv，它的体积非常大。
在mainDiv中有2个div应该是彼此相邻的，直到调整大小或移动设备进入。问题是第二个div与第一个div完全重叠。

预期结果http：/ /img17.imageshack.us/img17/473/yn9x.jpg

  #mainDiv {
 border ：1px纯黑色; 
 height：670px; 
} 
 
 #mainDiv div {
 position：relative; 
 border：1px纯红色; 
 float：left; 
} 
  

其余代码： http://jsfiddle.net/fDELs/2/

• 我无法使用width：[value]％，因为我不需要在放大时始终显示这两个div（加上它仍然以水平方式开始吃第一个div）。


• I不能使用float：left或float：right，因为如果页面变宽，那么空白区域出现在2个div之间。现在
  

现在我有js解决方案，它检查第一个div的宽度和位置，并设置第二个div的'left'属性，但我很乐意在CSS中完成。

解决方案

从div移除 position：relative 和 top 值，并使用 margin-top 。

  #mainDiv {
 border：1px纯黑色; 
 height：670px; 
} 
 
 #mainDiv div {
 border：1px纯红色; 
 float：left; 
} 
 
 #first {
 margin-top：170px; 
} 
 
 #second {
 height：400px; 
 margin-top：65px; 
} 
  

更新小提琴

So basically I have mainDiv, which is pretty much size of body. In mainDiv there are 2 divs which are supposed to be next to each other and they are until resize or mobile device comes in. Problem is that second div completely overlaps first one.

Desired outcome http://img17.imageshack.us/img17/473/yn9x.jpg

#mainDiv { 
    border: 1px solid black;
    height: 670px;
}

#mainDiv div {
    position:relative;
    border: 1px solid red;
    float: left;
}

Rest of code: http://jsfiddle.net/fDELs/2/

• I couldn't use width: [value]% because I don't need both divs always to be shown while zooming in (plus it still starts horizontally eating first div).
• I can't use float: left or float:right, because if page gets wider then empty area appears between 2 divs.

Right now I have js workaround solution, which checks the width and position of first div and sets 'left' property of second one, but I would love to do it in CSS.

解决方案

Remove position: relative and top values from divs, and use margin-top instead.

#mainDiv {
    border: 1px solid black;
    height: 670px;
}

#mainDiv div {
    border: 1px solid red;
    float: left;
}

#first {
    margin-top: 170px;
}

#second {
    height: 400px;
    margin-top: 65px;
}

Updated fiddle

这篇关于如何让div不会与父div内的另一个div重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！