img 未加载 CSS

Question

我有以下 CSS 文件：

.one_quarter {
  width: 225px;
}

.updates,
.updates a {
  color: #C0BAB6;
  background-color: #333333;
}

#header,
#wrapper,
#footer {
  display: block;
  width: 960px;
  margin: 0 auto;
}

body {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #afaeae;
  background-color: #232323;
}

address,
article,
aside,
figcaption,
figure,
footer,
header,
nav,
section {
  display: block;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  line-height: normal;
  text-transform: uppercase;
}

.clear:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  line-height: 0;
}

.clear {
  display: block;
  clear: both;
}

img {
  margin: 0;
  padding: 0;
  border: none;
  line-height: normal;
  vertical-align: middle;
}

.imgholder,
.imgl,
.imgr {
  padding: 4px;
  border: 1px solid #D6D6D6;
  text-align: center;
}

.imgl {
  float: left;
  margin: 0 15px 15px 0;
  clear: left;
}

.imgr {
  float: right;
  margin: 0 0 15px 15px;
  clear: right;
}

#wrapper #content #services {}

#wrapper #content #services ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#wrapper #content #services ul li {
  display: block;
  width: 100%;
  margin-bottom: 30px;
}

#wrapper #content #services ul li.last {
  margin-bottom: 0;
}

#wrapper #content #services ul li article {}

#container #content #services ul li article figure {}

#wrapper #content #services ul li article figure img {
  float: left;
  width: 180px;
  height: 150px;
  margin: 0;
  padding: 4px;
  border: 1px solid #666666;
}

#wrapper #content .more {
  text-align: right;
}

<html>

<head>
  <title> Title of page </title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css">
</head>
<div class="wrapper updates">
  <div id="content">
    <section id="services" class="last clear">
      <ul>
        <li>
          <article class="clear">
            <figure><img src="images/demo/180x150.gif" alt="">
              <figcaption>
                <h2>Indonectetus facilis leo nibh</h2>
                <p>content content content <a href="#" title="Free Website Templates">link to other content</a>. For full terms of use of this template please read our <a href="https://www.os-templates.com/template-terms">website template licence</a>.</p>
                <footer class="more"><a href="#">Read More &raquo;</a></footer>
              </figcaption>
            </figure>
          </article>
        </li>
        <li class="last">
          <article class="clear">
            <figure><img src="images/demo/180x150.gif" alt="">
              <figcaption>
                <h2>Indonectetus facilis leo nibh</h2>
                <p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more HTML5 templates visit <a href="https://www.os-templates.com/">free website templates</a>.</p>
                <footer class="more"><a href="#">Read More &raquo;</a></footer>
              </figcaption>
            </figure>
          </article>
        </li>
      </ul>
    </section>
  </div>
</div>

从模板看应该是这样的：

但是图片没有加载到应有的位置，而且 'Read more' 没有正确对齐。预先感谢您的帮助

[

你能告诉我遗漏了什么吗？对于 link 我曾尝试添加 paddign 和 margin 但 link 没有移动。

Answer 1

您已将最新的 CSS 规则分配给 ID 为 wrapper 的元素内的元素，但在您的 HTML 中，您将其用作 class 名称。

替换

<div class="wrapper updates">

和

<div id="wrapper" class="updates">

让它工作。

.one_quarter {
  width: 225px;
}

.updates,
.updates a {
  color: #C0BAB6;
  background-color: #333333;
}

#header,
#wrapper,
#footer {
  display: block;
  width: 960px;
  margin: 0 auto;
}

body {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #afaeae;
  background-color: #232323;
}

address,
article,
aside,
figcaption,
figure,
footer,
header,
nav,
section {
  display: block;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  line-height: normal;
  text-transform: uppercase;
}

.clear:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  line-height: 0;
}

.clear {
  display: block;
  clear: both;
}

img {
  margin: 0;
  padding: 0;
  border: none;
  line-height: normal;
  vertical-align: middle;
}

.imgholder,
.imgl,
.imgr {
  padding: 4px;
  border: 1px solid #D6D6D6;
  text-align: center;
}

.imgl {
  float: left;
  margin: 0 15px 15px 0;
  clear: left;
}

.imgr {
  float: right;
  margin: 0 0 15px 15px;
  clear: right;
}

#wrapper #content #services {}

#wrapper #content #services ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#wrapper #content #services ul li {
  display: block;
  width: 100%;
  margin-bottom: 30px;
}

#wrapper #content #services ul li.last {
  margin-bottom: 0;
}

#wrapper #content #services ul li article {}

#container #content #services ul li article figure {}

#wrapper #content #services ul li article figure img {
  float: left;
  width: 180px;
  height: 150px;
  margin: 0;
  padding: 4px;
  border: 1px solid #666666;
}

#wrapper #content .more {
  text-align: right;
}

<html>

<head>
  <title> Title of page </title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css">
</head>
<div id="wrapper" class="updates">
  <div id="content">
    <section id="services" class="last clear">
      <ul>
        <li>
          <article class="clear">
            <figure><img src="https://picsum.photos/250/180" alt="">
              <figcaption>
                <h2>Indonectetus facilis leo nibh</h2>
                <p>content content content <a href="#" title="Free Website Templates">link to other content</a>. For full terms of use of this template please read our <a href="https://www.os-templates.com/template-terms">website template licence</a>.</p>
                <footer class="more"><a href="#">Read More &raquo;</a></footer>
              </figcaption>
            </figure>
          </article>
        </li>
        <li class="last">
          <article class="clear">
            <figure><img src="https://picsum.photos/250/180" alt="">
              <figcaption>
                <h2>Indonectetus facilis leo nibh</h2>
                <p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more HTML5 templates visit <a href="https://www.os-templates.com/">free website templates</a>.</p>
                <footer class="more"><a href="#">Read More &raquo;</a></footer>
              </figcaption>
            </figure>
          </article>
        </li>
      </ul>
    </section>

关于图片：检查开发者控制台中的路径和控制台和网络面板。

img 未加载 CSS

img not loading in CSS

html

css