div宽度为80％，在小屏幕上会使父div溢出

Question

我只是从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;
}

我想念什么？ 提前致谢！

Answer 1

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

Answer 2

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

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

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

我只看到“最大宽度：500像素”，通常在使它响应时，我们会使用更多的媒体查询。

在此处进行更改，还尝试在CSS上添加更多分辨率。