Question

我想知道如何制作一个图像，在它的一侧会有一个链接到另一个页面的标题和描述。我希望它看起来类似于http://www.coolmath-games.com/的游戏链接，因为我也在制作一个游戏网站。提前致谢！ *我已经围绕这个进行了研究，无法找到任何类似的东西！我也试图检查元素，看看他们是如何做到的，但我找不到任何东西，因为它似乎都是由css完成的。

Answer 1

你没有彻底完成你的研究，因为它很容易实现：

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  padding: 2rem;
  box-sizing: border-box;
  font: 1.6rem/1.3 arial, sans-serif;
}

.imgBox {
  width: 34.4rem;
  clear: both;
  margin-bottom: 1.5rem;
}

.imgBox img {
  float: left;
  margin-right: 0.5rem;
}

.imgBox p {
  display: inline;
}

.imgBox a {
  text-decoration: none;
  color: #1565C0;
}

<div class="imgBox">
  <a href="https://stackoverflow.com/">
    <img src="http://via.placeholder.com/117x66" alt="someImageDescription" />
    <h3>Some Title</h3>
  </a>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>

<div class="imgBox">
  <a href="https://stackoverflow.com/">
    <img src="http://via.placeholder.com/117x66" alt="someImageDescription" />
    <h3>Some Title</h3>
  </a>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>

<div class="imgBox">
  <a href="https://stackoverflow.com/">
    <img src="http://via.placeholder.com/117x66" alt="someImageDescription" />
    <h3>Some Title</h3>
  </a>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>

如何放置带有标题和图像的图像一起描述？

1 个答案: