2

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

期望的结果 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中做。

4

5 回答 5

5

从 div 中删除position: relative和值，然后使用。topmargin-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;
}

更新的小提琴

于 2013-07-12T15:50:42.727 回答
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;
    }
}
于 2013-07-12T16:15:52.017 回答
1

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

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

我试图让 3 个 div 并排坐着。对我来说，它为每个 div 提供了每个类，它们自己的“float:left;” 属性。所以所有三个 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;
}

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

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

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

于 2019-11-26T12:38:53.460 回答
0

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

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

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

于 2013-07-12T15:59:39.033 回答
0

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

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

#first {
    top: 170px;
}

#second { 
    height: 400px;
    top: 65px;
}
于 2013-07-12T15:52:30.087 回答