Question

我创建了3个没有响应css代码的div。我想将div的宽度设置为最大30％但显示得更大。包含图像名称的文本框根据大小进行缩放，但图像和div不是。

这是html代码：

<div id='item' align = center style='padding:40px; background-color:white;'>
<div id='item_box'> 
<a href='travel.php?id=".$row['cityid']."&name=".$row['cityname']."'>
<img class='cityimg' src='images/city/".($row['cityname']).".jpg'/></a>    </div>
<div id='item_cityname' align=center style='padding:15px; background-color:#004b79;' > ".$row['cityname']." </div>
</div>"

这是css代码：

#item{

max-width: 30%;

}

#item_box{
max-width: 30%;  
}


#item_cityname{ 
max-width: 30%;
}

Answer 1

使用此代码

#item{

max-width: 30%;

}

#item_box{
max-width: 30%;  
}


#item_cityname{ 
max-width: 30%;
}

Answer 2

请查看HTML或CSS中的ID或CLASS定义，它们不匹配！

#item{

max-width: 30%;

}

#item_box{
max-width: 30%;  
}


#item_cityname{ 
max-width: 30%;
}

<div id='item' align = center style='padding:40px; background-color:white;'>
  <div id='item_box'> 
    <a href='travel.php?id=".$row['cityid']."&name=".$row['cityname']."'>
      <img class='cityimg' src='images/city/".($row['cityname']).".jpg'/>
    </a>    
  </div>
  <div id='item_cityname' align=center style='padding:15px; background-color:#004b79;' > ".$row['cityname']." 
  </div>
</div>

Answer 3

您的CSS定位类，但您的代码使用ID。如果您想定位ID，请在CSS中使用#代替.。否则，请在HTML中将id更改为class。

Answer 4

正如其他人所提到的，你在你的html中使用ID，但试图在我们的CSS中定位类（。）。这就是为什么你的css没有响应的原因。

对于不缩放的图像，图像的宽度是否大于div的宽度？

您可以尝试的一件事是添加最大宽度：100％;和身高：汽车;在css中使用img标签，或者您可以使用ID或类来定位特定图像。

这样的事情：

img { max-width: 100%; height: auto; }

或代码段中的图片

.cityimg { max-width: 100%; height: auto; }

这样你的图像永远不会比容器div宽。高度：自动将有助于确保图像在缩放时保持其比例。

正如旁注所示，您的ID项，item_box和item_cityname似乎有点泛泛，就像它们会被用于所有3个div一样，这会导致重复ID的验证错误。我建议添加可以应用于所有3个div的类，并使用这些类来设置样式。

Div没有响应css

4 个答案: