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

让我们检查父母，看看父母＆＃34;宽度＆＃34;

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

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

我只看到＆＃34; max-width：500px＆＃34;，通常当我们使其响应时，我们会使用更多的媒体查询。

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

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

2 个答案: