Question

我试图通过媒体查询使我的网站响应。外部DIV改变了宽度，但内部节点的宽度似乎没有变化。

紫色是外面的DIV。

Normal desktop size, Blue=DIV

内部文字不会因响应式尺寸变化而改变。

Smaller size, blue color=DIV

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

以下是代码：

＆＃13;

.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%;
	}
}

＆＃13;

<!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>

＆＃13;

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元素，以使其不超过其父元素的宽度。

＆＃13;

.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%;
  }
}

＆＃13;

<!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>

＆＃13;

CSS响应内部DIV没有调整到外部DIV宽度

3 个答案: