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

让我们检查父级，看看父级 "width"

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

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

我只看到"max-width: 500px"，通常我们做响应式的时候，会多用一些mediaqueries。

在那里进行更改，还尝试在 css 上添加更多分辨率。

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

div width at 80%, overflows parent div on small screens

html

css

width

responsive