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

How to make div not overlap another div inside parent div

提问by R.P

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.

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

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

期望的结果 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/

其余代码：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.

• 我不能使用 width: [value]% 因为我不需要在放大时总是显示两个 div（而且它仍然开始水平吃第一个 div）。
• 我不能使用 float: left 或 float:right，因为如果页面变宽，则空白区域会出现在 2 个 div 之间。

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.

现在我有 js 解决方案，它检查第一个 div 的宽度和位置并设置第二个 div 的“左”属性，但我很想在 CSS 中做到这一点。

回答by Morpheus

Remove position: relativeand topvalues from divs, and use margin-topinstead.

从 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

更新的小提琴

回答by Mohammad Javad Naderi

Try this:

尝试这个：

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

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

Resize the window and see what happens.

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

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

回答by goon303

This is an old post, I know, but people are still viewing it when they search for this same issue on Google.... cause that's how I landed here, and none of the solutions given worked for me.

这是一篇旧帖子，我知道，但是当人们在 Google 上搜索同样的问题时，他们仍在查看它......因为这就是我登陆这里的方式，并且给出的解决方案都不适合我。

For those of you who were looking for a solution to the same problem I was (getting divs to sit side by side without overlapping each other) then my post is for you. I don't know if this was the answer to the original poster though but it might be close?

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

I was trying to get 3 div's to sit side by side. What did it for me was giving each class for each div, their own "float:left;" attribute. So all three div's need to float left. I also had to set the widths so they would not push each other down (your width's should add up to a total of 100% or less) and I set the heights the same for each, 100px although heights could vary I think. Another thing, probably you should set the background-size to contain and background-repeat to no-repeat. You can set the background-position however you like.

我试图让 3 个 div 并排坐着。对我来说是什么给每个 div 的每个类，它们自己的“浮动：左；” 属性。所以所有三个 div 都需要向左浮动。我还必须设置宽度，这样它们就不会相互推倒（您的宽度加起来应该等于或小于 100%），并且我将每个高度设置为相同的 100 像素，尽管我认为高度可能会有所不同。另一件事，可能您应该将背景大小设置为包含并将背景重复设置为不重复。您可以随意设置背景位置。

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

Basically, from what I can tell, the float left attribute tells the object to float to the left of the object next to it. Since each object is sitting to the left of another, and you also don't want them overlapping, just adding float:left seems to work. As for making sizes match, or two halves of an image match, that has more to do with your photo editing than anything else I think, because you'll need the heights to be exactly the same for both images and then your width's need to be the correct ratios as well. Yeah, you might be looking to do some magic with CSS.... but I can't picture it working if you're going for a site that is responsive to different browsers on different screen sizes.... Also, I wasn't able to see the picture example you posted. It seems to have been taken down.

基本上，据我所知，浮动左属性告诉对象浮动到它旁边的对象的左侧。由于每个对象都位于另一个对象的左侧，并且您也不希望它们重叠，因此只需添加 float:left 似乎就可以了。至于使尺寸匹配或图像的两半匹配，这与您的照片编辑有关，而不是我认为的其他任何事情，因为您需要两个图像的高度完全相同，然后您的宽度需要也是正确的比例。是的，你可能想用 CSS 做一些魔法....无法看到您发布的图片示例。好像已经下架了。

ANYWAY, like I said, this is for those of you who googled "how to make my div's not overlap" or something like that, and ended up at this post.... So I hope this helps somebody. Google failed me again....

无论如何，就像我说的，这是为那些在谷歌上搜索“如何使我的 div 不重叠”或类似内容的人准备的，并最终在这篇文章中......所以我希望这对某人有所帮助。谷歌又让我失望了....

Ah, sorry, I just realized you were trying to get them to work inside a parent DIV, but actually, this does work inside a parent DIV. You just need to make sure the parent DIV has a matching height to the other divs you want to fit inside it.

啊，抱歉，我刚刚意识到您试图让它们在父 DIV 中工作，但实际上，这确实在父 DIV 中工作。您只需要确保父 DIV 与您想要放入其中的其他 div 具有匹配的高度。

回答by DrCord

So the answer has little to do with what you posted here and can only be ascertianed by looking at your complete fiddle.

因此，答案与您在此处发布的内容无关，只能通过查看完整的小提琴来确定。

The problem is that you have a both interior divs being relatively positioned from the same point. The div full of content is only pushed down a bit and the one with almost no content is pushed down into the middle of that.

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

#first {
    top: 170px;
}

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

回答by Raymond

Removing position:relative from #mainDiv div seems to do the trick

从#mainDiv div 中删除 position:relative 似乎可以解决问题

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

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

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