在80％的div寬度，在小屏幕上溢出parent div

我剛剛開始使用html/css/javascript。我正在試圖製作一個80％的父容器寬度的報價泡泡。你可以在這裏看到：http://seiu775bg.bitballoon.com/sample。在80％的div寬度，在小屏幕上溢出parent div

它在筆記本電腦屏幕上看起來很好，但是當我縮小屏幕時，它不會保持在80％的寬度。

下面是對話氣泡代碼：

p.speech { 
    position: relative; 
    width: 80%; 
    height: auto; 
    text-align: left; 
    font-style:italic; 
    line-height: auto; 
    padding: 10px 20px; 
    background-color: #fff; 
    border: 8px solid #666; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    -webkit-box-shadow: 2px 2px 4px #888; 
    -moz-box-shadow: 2px 2px 4px #888; 
    box-shadow: 2px 2px 4px #888; 
    display:block; 
    margin: 8px 8px 35px 8px; 
}

我缺少什麼？提前致謝！

來源

2016-09-20 Deidre

感謝您的快速回復！我做了你所說的，經過一段時間的調整後，我得到了它的工作。 – Deidre

讓檢查父，擔當起家長一起來看看「寬度」

#container { 
    /* border: 1px solid black; */ 
    width: 500px; <--- change it. 
} 

@media screen and (max-width: 500px) 
#container { 
    width: auto; <--- see? 
}

我只看到「最大寬度：500像素」，平時我們做它響應，我們使用一些更多的媒體查詢。

在那裏進行更改，也嘗試添加更多的決議在您的CSS。

來源

2016-09-20 00:19:25 Elennio

我看到了你的問題。它在#container。您設置了width:500px;將其更改爲max-width: 500px;或width:auto;

來源

2016-09-20 00:14:08 MRustamzade

在80％的div寬度，在小屏幕上溢出parent div

回答

相關問題