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

2017-04-23 102 views 0 likes

我想阻止两个并排的div在响应式布局中重叠。防止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与页面调整大小（较小）上的左侧重叠。我需要阻止这一点。

来源

2017-04-23 Jamie Sexton

你有'div'里面的'img'。 'div'响应，但是'img'是一个固定的大小。这是计划吗？ – Manngo

回答

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

下面将工作：

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

在此，我已注意，图像的宽度为114px，并且容器的宽度设定为100％减去。

我也将容器漂浮在右边。

请注意calc是有点挑剔。尤其是，您需要-运营商周围的空间：calc(100%-114px)不起作用，至少在所有浏览器中都不行。

来源

2017-04-23 05:31:40 Manngo

问题是，当您的实际图像不缩小.image div时。所以.image div会根据其宽度百分比进行调整，但不包含其中包含的图像。如果将宽度：100％添加到img元素，图像现在将随div容器一起收缩，并且文本div不会重叠。

来源

2017-04-23 05:26:53

我不希望图像缩小。我想缩小的唯一部分是'storyWrapper'div。而我只希望这个div的宽度缩小，而不是高度。 –

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

回答

相关问题