防止div在響應式佈局中重疊

我想阻止兩個並排的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在響應式佈局中重疊

回答

相關問題