Question

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

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;
}

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

我无法使用width：[value]％因为我不需要在放大时始终显示两个div（加上它仍然从水平开始吃第一个div）。
我不能使用float：left或float：right，因为如果页面变宽，那么空区域会出现在2个div之间。

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

Answer 1

从div中删除position: relative和top值，然后使用margin-top。

#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

Answer 2

试试这个：

http://jsfiddle.net/bSK6p/1/

调整窗口大小，看看会发生什么。

#mainDiv { 
    border: 1px solid black;
}

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

@media screen and (min-width:300px){
    #mainDiv { 
        height: 670px;
        display: flex;
        display: -webkit-flex;
    }

    #first {
        -webkit-flex: none;
        flex: none;
    }

    #second {
        -webkit-flex: 1;
        flex: 1;
        height: 400px;
    }
}

Answer 3

所以答案与你在这里发布的内容没什么关系，只能通过查看完整的小提琴来确定。

问题是你有两个内部div从相同点相对定位。 div满内容只被推下一点，几乎没有内容的那个被推到了中间。

#first {
    top: 170px;
}

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

Answer 4

删除位置：来自#mainDiv div的相对似乎可以解决问题

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

http://jsfiddle.net/fDELs/4/

Answer 5

我知道这是一篇过时的文章，但是当人们在Google上搜索相同的问题时，人们仍然在查看它。...原因就是我登陆这里的方式，给出的解决方案都不适合我。

对于那些正在寻找我所遇到的相同问题的解决方案的人（让div并排坐着而不互相重叠），那么我的帖子适合您。我不知道这是否是原始海报的答案，但可能接近吗？

我试图让3个div并排坐着。对我来说，是为每个div的每个班级分配了自己的“ float：left;”。属性。因此，所有三个div都需要向左浮动。我还必须设置宽度，以使它们不会彼此向下按压（您的宽度总计不得超过100％或更少），并且我将每个高度都设置为100px，尽管高度可能会有所不同。另一件事，可能您应该将background-size设置为contains并将background-repeat设置为no-repeat。您可以根据需要设置背景位置。

.image1Div{
	background-image:url(images/image1.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	width:32%;
	height:100px;
	float:left;
}

.image2Div {
	background-image:url(images/image2.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	width:32%;
	height:100px;
	float:left;
}

.imgage3Div{
	background-image:url(images/image3.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	width:32%;
	height:100px;
	float:left;
}

基本上，根据我所知，float left属性告诉对象将浮动到其旁边的对象的左侧。由于每个对象都位于另一个对象的左侧，并且您也不希望它们重叠，因此仅添加float：left似乎可行。至于使尺寸匹配或图像匹配的两半，这与您的照片编辑息息相关，这比我想的要多，因为您需要两张图像的高度都完全相同，然后宽度需要也是正确的比例。是的，您可能希望使用CSS做一些魔术。...但是，如果您要使用的网站能够在不同屏幕尺寸下响应不同的浏览器，那么我无法想象它是否有效。...而且，我当时无法看到您发布的图片示例。它似乎已被删除。

无论如何，就像我说的那样，这是给那些用谷歌搜索“如何使我的div不重叠”或类似的东西，并最终发表在这篇文章上的人。...所以我希望这对某人有所帮助。 Google再次使我失败。...

抱歉，我只是意识到您正在尝试让它们在父级DIV中工作，但是实际上，这确实在父级DIV中工作。您只需要确保父级DIV的高度与您要放入其中的其他div的高度匹配即可。

如何使div不与父div中的另一个div重叠

5 个答案: