CSS 响应式内部 DIV 未调整到外部 DIV 宽度

Question

我正在尝试使用媒体查询使我的网站响应。外部 DIV 改变了宽度，但内部节点的宽度似乎没有改变。

紫色是外层DIV。

内部文本不随响应大小变化而变化。

外部 DIV 变小，但内容保持相同宽度。

代码如下：

.main{
 margin: 0px;
 width:1200px;
 background-color:blue;
}

.auto-style3{
 margin:0px;
 background: rgba(204, 204, 204, 0.7);
}

@media only screen and (max-width: 799px){
 .main{
  width:100%;
 }
 .auto-style3{
  width:100%;
 }
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="text.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="main">
    <div class="auto-style3" style="height: 100px; width: 1200px" >
        <h3 class="onama2"><b>O nama</b></h3>
        <h4 class="onama">Tvrtka Agrofit d.o.o. osnovana je 2012.godine s ciljem pružanja stručnog savjetovanja i ostalih usluga u poljoprivrednoj proizvodnji.
Proizvođače pratimo i savjetujemo "od sjetve do žetve" te svim partnerima nudimo <b>uslugu besplatne dostave za naše proizvode na području Republike Hrvatske.</b>
        </h4>
    </div>
</div>

</body>
</html>

Answer 1

您的选择是： a) 使用 font-size 属性改变字体大小，或者 b) 在容器上使用 overflow 使内容可滚动

编辑：如果您愿意让文字自动换行，还有其他选项，请参阅此问题的其他答案。

Answer 2

这是因为您在 .auto-style3 div 上定义了固定宽度。删除内联 style="height: 100px; width: 1200px"

http://codepen.io/JKudla/pen/KWGgpP

Answer 3

您需要将 max-width 应用于 .auto-style3 元素，使其不超过其父元素的宽度。

.auto-style3 {
  margin: 0px;
  background: rgba(204, 204, 204, 0.7);
}

.main {
  margin: 0px;
  width: 1200px;
  background-color: blue;
}

.auto-style3 {
    max-width: 100%;
}

@media only screen and (max-width: 799px) {
  .main {
    width: 100%;
  }
  .auto-style3 {
    width: 100%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="text.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div class="main">

    <div class="auto-style3" style="height: auto; width: 1200px">
      <h3 class="onama2"><b>O nama</b></h3>
      <h4 class="onama">Tvrtka Agrofit d.o.o. osnovana je 2012.godine s ciljem pružanja stručnog savjetovanja i ostalih usluga u poljoprivrednoj proizvodnji. Proizvođače pratimo i savjetujemo "od sjetve do žetve" te svim partnerima nudimo <b>uslugu besplatne dostave za naše proizvode na području Republike Hrvatske.</b></h4>


    </div>

  </div>

</body>

</html>

CSS 响应式内部 DIV 未调整到外部 DIV 宽度

CSS responsive inner DIV not resizing to outer DIV width

html

css

responsive

css-specificity