gpt4 book ai didi

html - CSS 响应式内部 DIV 未调整为外部 DIV 宽度

转载 作者:太空宇宙 更新时间:2023-11-04 08:56:40 25 4
gpt4 key购买 nike

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

紫色是外层DIV。

Normal desktop size, Blue=DIV

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

Smaller size, blue color=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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com