在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

回答

相关问题