时间戳

首页 > 解决方案 > 如何将 CSS 应用到这个 div 类？

html - 如何将 CSS 应用到这个 div 类？

问题描述

我正在尝试在 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;
}

标签： htmlcssclass

解决方案

您还需要width为 img 指定，否则它将保持其原始宽度。

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>

推荐阅读