在响应式布局中防止Divs重叠

时间:2017-04-23 05:01:53

标签: css responsive-design resize overlapping

我试图阻止两个并排的div在响应式布局中重叠。

这是我的HTML:

    <div class="image"><img src="images/misc/libertyXSmall.jpg"/></div>
    <div class="storyWrapper">
    <div class="headline">THIS IS A TEST HEADLINE TO SEE HOW EVERYTHING 
    WORKS ON THIS NEWS LIST PAGE!</div>
    </div>

这是CSS:

 body{margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;}
.mainContainer{float:left; height:auto; width:100%; max-width:800px; }
.image{float:left; margin-top:0px; width:14.25%; height:auto;}
.storyWrapper{float:left;  width:85.75%; height:auto; min-height:64px; background-color:#f6f6f6; color:#000000;transition:0.2s; }
.storyWrapper:hover{background-color:#c0c0c0; color:#ffffff;}
.headline{text-align:left; padding:6px 6px 6px 6px; font-size:11pt; font-weight:bold; font-family:Arial; text-decoration:none;}

此页面的链接是:http://www.rebelplanetnews.com/newsMenu3.html

正如您所看到的,我的问题是......右侧的文本div与页面调整大小(较小)上的图像div重叠。我需要阻止它。

2 个答案:

答案 0 :(得分:0)

问题是.image div时你的实际图像不会缩小。因此.image div将根据其宽度百分比进行调整,但不会根据其中包含的图像进行调整。如果向img元素添加宽度:100%,图像现在将与div容器一起缩小,并且文本div不会重叠。

答案 1 :(得分:0)

答案是不要在标题中使用百分比。最简单的解决方案是使用calc值,该值可用于所有现代浏览器。

以下内容可行:

div.storyWrapper {
    width: calc(100% - 114px);
    float: right;
}

在这里,我注意到图像的宽度是114px,并将容器的宽度设置为100%减去。

我也把容器漂到右边。

请注意,calc有点挑剔。特别是,-运算符周围需要空格:calc(100%-114px)不起作用,至少在所有浏览器中都不行。