我正在尝试使用媒体查询使我的网站响应。外部 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>最佳答案
您需要将 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>关于html - CSS 响应式内部 DIV 未调整为外部 DIV 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43074505/