div 宽度为 80%，在小屏幕上溢出父 div答案

【问题标题】：div width at 80%, overflows parent div on small screensdiv 宽度为 80%，在小屏幕上溢出父 div
【发布时间】：2016-09-20 08:24:44
【问题描述】：

我只是从 html/css/javascript 开始。我正在尝试制作一个为其父容器宽度的 80% 的报价气泡。你可以在这里看到它：http://seiu775bg.bitballoon.com/sample。

在笔记本电脑屏幕上看起来不错，但是当我将屏幕缩小时，它不会保持在 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;
}

我错过了什么？提前致谢！

【问题讨论】：

感谢您的快速回复！我按照你说的做了，在调整了一些边距后，我得到了它的工作。

标签： html css width responsive

【解决方案1】：

让我们检查父级，看看父级“宽度”

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

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

我只看到“max-width: 500px”，通常当我们让它响应时，我们会使用更多的媒体查询。

在那里进行更改，同时尝试在您的 css 上添加更多分辨率。

【讨论】：

【解决方案2】：

我看到了你的问题。它位于#container。您已将其设置为 width:500px; 将其更改为 max-width: 500px; 或 width:auto;

【讨论】：