HTML在图像底部添加扩展边框并在其上写入文本

问题描述 投票：-1回答：3

这是我的CSS。我想为每个图像添加扩展边框并在该空间中写入文本。我怎样才能做到这一点？

.column {
    -ms-flex: 50%; /* IE 10 */
    flex: 50%;
    padding: 0 4px;
}
.row {
    display: -ms-flexbox; /* IE 10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE 10 */
    flex-wrap: wrap;
    padding: 0 2px;
}


.column img {
        margin-top: 12px;
        vertical-align: middle;
        border: 2px solid;
}

这是我的HTML。一切都很好，我只想在底部的扩展边框中添加文字：

<div class="row">
  <div class="column">
    <img src="https://i-h1.pinimg.com/736x/87/e9/38/87e938ab69a614cddb14a6866b2478d0.jpg" onclick="app();" style="width:100%">
    <img src="https://i-h1.pinimg.com/564x/32/03/4f/32034f6da33f2932d88c6d6db7fa117a.jpg" style="width:100%">
    <img src="https://i-h1.pinimg.com/736x/96/e6/54/96e654398c4b2cd7afc03410d636dbea.jpg" style="width:100%">
    <img src="https://i-h1.pinimg.com/736x/4e/78/48/4e7848375fa721845f4986006229555a.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="https://i-h1.pinimg.com/736x/1a/b0/d4/1ab0d4ef04e3e789396ae744f626c68a.jpg" style="width:100%">
    <img src="https://i-h1.pinimg.com/736x/41/fd/31/41fd312937d0fd0e864d8fdd53f055ba.jpg" style="width:100%">
    <img src="https://i-h1.pinimg.com/736x/06/98/94/069894936419220407b4b11edfca833d.jpg" style="width:100%">
    <img src="https://i-h1.pinimg.com/736x/18/8b/bf/188bbfa47af6b445cf2a5a1869c90566.jpg" style="width:100%">
  </div>  
</div>
html css
3个回答
2
投票

HTML5为此目的提出了<figure> HTML标记：

figure {
  width: 25vw
}

img {
  width: 100%
}
<figure>
  <img src="https://html.com/wp-content/uploads/flamingo.jpg" alt="flamingo">
  <figcaption><i>fig. 1</i> A pink flamingo.</figcaption>
</figure>

所以你得到这个结果：

.column {
  -ms-flex: 50%;
  /* IE 10 */
  flex-basis: 45%;
  padding: 0 4px;
}

.row {
  display: -ms-flexbox;
  /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap;
  /* IE 10 */
  flex-wrap: wrap;
  padding: 0 2px;
}

.column figure {
  margin-top: 12px;
  padding: 10px;
  vertical-align: middle;
  border: 2px solid;
}

img {
  width: 100%
}
<div class="row">
  <div class="column">
    <figure><img src="https://i-h1.pinimg.com/736x/87/e9/38/87e938ab69a614cddb14a6866b2478d0.jpg" onclick="app();">
      <figcaption><i>fig. 1</i> A picture caption.</figcaption>
    </figure>
    <figure><img src="https://i-h1.pinimg.com/564x/32/03/4f/32034f6da33f2932d88c6d6db7fa117a.jpg">
      <figcaption><i>fig. 2</i> A picture caption.</figcaption>
    </figure>
    <figure><img src="https://i-h1.pinimg.com/736x/96/e6/54/96e654398c4b2cd7afc03410d636dbea.jpg">
      <figcaption><i>fig. 3</i> A picture caption.</figcaption>
    </figure>
    <figure><img src="https://i-h1.pinimg.com/736x/4e/78/48/4e7848375fa721845f4986006229555a.jpg">
      <figcaption><i>fig. 4</i> A picture caption.</figcaption>
    </figure>
  </div>
  <div class="column">
    <figure><img src="https://i-h1.pinimg.com/736x/1a/b0/d4/1ab0d4ef04e3e789396ae744f626c68a.jpg">
      <figcaption><i>fig. 5</i> A picture caption.</figcaption>
    </figure>
    <figure><img src="https://i-h1.pinimg.com/736x/41/fd/31/41fd312937d0fd0e864d8fdd53f055ba.jpg">
      <figcaption><i>fig. 6</i> A picture caption.</figcaption>
    </figure>
    <figure><img src="https://i-h1.pinimg.com/736x/06/98/94/069894936419220407b4b11edfca833d.jpg">
      <figcaption><i>fig. 7</i> A picture caption.</figcaption>
    </figure>
    <figure><img src="https://i-h1.pinimg.com/736x/18/8b/bf/188bbfa47af6b445cf2a5a1869c90566.jpg">
      <figcaption><i>fig. 8</i> A picture caption.</figcaption>
    </figure>
  </div>
</div>
0
投票

你可以做这样的事情，如果这就是你所要求的。

.column {
    -ms-flex: 50%; /* IE 10 */
    flex: 50%;
    padding: 0 4px;
}
.row {
    display: -ms-flexbox; /* IE 10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE 10 */
    flex-wrap: wrap;
    padding: 0 2px;
}


 ul li {
        margin-top: 12px;
        vertical-align: middle;
        padding: 20px;
        border: 2px solid;
        list-style: none;
    }


<!DOCTYPE html>
<HTML>
<LINK rel="stylesheet" href="style.css" type="text/css">
<div class="row">
  <div class="column">

    <ul>
        <li>
            <img src="https://i-h1.pinimg.com/736x/87/e9/38/87e938ab69a614cddb14a6866b2478d0.jpg" onclick="app();" style="width:100%">
            <p>Something</p>
        </li>
        <li>
            <img src="https://i-h1.pinimg.com/564x/32/03/4f/32034f6da33f2932d88c6d6db7fa117a.jpg" style="width:100%">
            <p>Something else</p>
        </li>
        <li>
            <img src="https://i-h1.pinimg.com/736x/96/e6/54/96e654398c4b2cd7afc03410d636dbea.jpg" style="width:100%">
            <p> </p>
        </li>
    <img src="https://i-h1.pinimg.com/736x/4e/78/48/4e7848375fa721845f4986006229555a.jpg" style="width:100%">

    <img src="https://i-h1.pinimg.com/736x/1a/b0/d4/1ab0d4ef04e3e789396ae744f626c68a.jpg" style="width:100%">
    <img src="https://i-h1.pinimg.com/736x/41/fd/31/41fd312937d0fd0e864d8fdd53f055ba.jpg" style="width:100%">
    <img src="https://i-h1.pinimg.com/736x/06/98/94/069894936419220407b4b11edfca833d.jpg" style="width:100%">
    <img src="https://i-h1.pinimg.com/736x/18/8b/bf/188bbfa47af6b445cf2a5a1869c90566.jpg" style="width:100%">
  </ul
  </div>  
</div>

</HTML>
-1
投票
figcaption {
  border: 1px solid blue;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  text-shadow: none;
  color: black;
  text-align: center;
  height: 20px;
}

得到这个作为我的答案。谢谢你们。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.