如何将 CSS 应用到这个 div 类？答案

【问题标题】：How can I apply CSS to this div class?如何将 CSS 应用到这个 div 类？
【发布时间】：2021-10-09 05:31:13
【问题描述】：

我正在尝试在 CSS 中使图像宽度为 300 像素。我在 HTML 中围绕图像“mainpic”创建了一个 div 类，然后在 CSS 中，我做了 .mainpic 和 width:300px;但它没有改变大小。任何想法为什么 CSS 不适用于这个 div 类？谢谢你和下面的代码！

这是 HTML（减去 head 部分）：

 <body>
 <ul>
   <li><a href="index.html">Home</a></li>
   <li><a href="info.html">Information</a></li>
   <li><a href="sources.html">Sources</a></li>
</ul>
 <h1>Katherine Graham </h1>
 <h2> Silver Spoon to CEO</p>
 <a href="https://www.washingtonpost.com/">Democracy Dies In the Dark</a>
 <br>
 <div class="mainpic">
 <img src="http://t2.gstatic.com/licensed-image?q=tbn:ANd9GcR42mPHUzh3APxp1Q8iK6BiQNns98VuwX9zk2nQvukALjFAc8207NEMfcOES8Qe" alt="Katherine Graham">
 <div>
 <caption>Katherine Graham</caption>
</body>

这是 CSS：

h1{
color:red;
font-size: 50px;
text-decoration: underline;
}
h2 {
font-size: 25px;
}
ul li {
display: inline;
background-color:;
margin: 10px;
border-radius: 25%;
border-color:khaki;
padding: 25px;
border: 25px;
width: 90px;
list-style-type: none;
}
body {
background-color: antiquewhite;
}
.mainpic {
width: 300px;
}

【问题讨论】：

您只设置了 div 的宽度。您还必须指定其中图像的宽度： .mainpic img { width: 100%;另外，不相关，但你的结束标签之一是错误的（银勺......）。您必须以 . 结束它
阿米尔侯赛因，非常感谢！这非常有用且有效！

标签： html css class

【解决方案1】：

你还需要为img指定width，否则它会保持原来的宽度。

h1 {
  color: red;
  font-size: 50px;
  text-decoration: underline;
}
h2 {
  font-size: 25px;
}
ul li {
  display: inline;
  background-color: ;
  margin: 10px;
  border-radius: 25%;
  border-color: khaki;
  padding: 25px;
  border: 25px;
  width: 90px;
  list-style-type: none;
}
.mainpic {
  width: 300px;
}

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="info.html">Information</a></li>
  <li><a href="sources.html">Sources</a></li>
</ul>
<h1>Katherine Graham </h1>
<h2> Silver Spoon to CEO</p>
<a href="https://www.washingtonpost.com/">Democracy Dies In the Dark</a>
<br>
<div class="mainpic">
<img src="http://t2.gstatic.com/licensed-image?q=tbn:ANd9GcR42mPHUzh3APxp1Q8iK6BiQNns98VuwX9zk2nQvukALjFAc8207NEMfcOES8Qe" alt="Katherine Graham" width="100%">
<div>
<caption>Katherine Graham</caption>

【讨论】：

【解决方案2】：

您的容器宽度 .mainpic 已经占用了 300 像素；尝试添加 .mainpic img {width:100%}。这肯定会奏效。

【讨论】：