以HTML格式以网格或背包样式显示图像

例如，我找不到如何以网格样式显示图像，例如，带有文本的tf2背包 我已经有了这些图片，我只需要帮助他们把图片上的文字放在一个网格上。 代码：

切换导航

---

因为您正在使用引导。在这里，你可以玩它，除非你知道col grid系统，你可以从这个url检查它（

在您的身体html部分添加此编码

<div class="container">
  <h1>Responsive Image Grid</h1>

    <hr>

  <div class="row">
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
  </div>
  <hr>
  <br><br>

</div>

这是你将得到的结果

---

希望您能学到一些东西。：/p>因为您正在使用引导。在这里，你可以玩它，除非你知道col grid系统，你可以从这个url检查它（

在您的身体html部分添加此编码

<div class="container">
  <h1>Responsive Image Grid</h1>

    <hr>

  <div class="row">
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
     <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#">
             <img src="http://placehold.it/200x200" class="thumbnail img-responsive">
        </a>
    </div>
  </div>
  <hr>
  <br><br>

</div>

这是你将得到的结果

---

希望你能学到一些东西。

更新了好吧，你可以设计很多样式，并使用position属性来实现文本的上下效果

<div class="container">
 <div class="row">
  <div class="col-md-3">
    <div class="image-grid">
      <div class="text-above"><p> Some Text Above</p></div>
      <div class="text-below"><p> Some Text Below</p></div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="image-grid">
      <div class="text-above"><p> Some Text Above</p></div>
      <div class="text-below"><p> Some Text Below</p></div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="image-grid">
      <div class="text-above"><p> Some Text Above</p></div>
      <div class="text-below"><p> Some Text Below</p></div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="image-grid">
      <div class="text-above"><p> Some Text Above</p></div>
      <div class="text-below"><p> Some Text Below</p></div>
    </div>
  </div>
 </div>
</div>

---

更新了您可以设置很多样式，并使用position属性来实现文本的上下效果

<div class="container">
 <div class="row">
  <div class="col-md-3">
    <div class="image-grid">
      <div class="text-above"><p> Some Text Above</p></div>
      <div class="text-below"><p> Some Text Below</p></div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="image-grid">
      <div class="text-above"><p> Some Text Above</p></div>
      <div class="text-below"><p> Some Text Below</p></div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="image-grid">
      <div class="text-above"><p> Some Text Above</p></div>
      <div class="text-below"><p> Some Text Below</p></div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="image-grid">
      <div class="text-above"><p> Some Text Above</p></div>
      <div class="text-below"><p> Some Text Below</p></div>
    </div>
  </div>
 </div>
</div>

---

在此处粘贴html或JSFIDLE链接。显示一些代码请将图像的宽度设置为包装div并使其浮动left@danish443我没有任何代码，我完全迷路了，但我会发布我的网站到目前为止，它只是一个基本的引导网站粘贴您的html在这里或JSFIDLE链接。显示一些代码请将图像的宽度设置为包装div并使其浮动left@danish443我没有它的任何代码，我完全失去了，但我会张贴我的网站到目前为止，它只是一个基本的引导网站，我该如何添加文本上img@bbousq我不明白。@L-X答案这不是一个好的学习方法，因为添加这样的文本。我可以说布局混乱。@Fiido，你读过问题了吗，他在问如何在图像上显示文本，我的代码着重于此，但你的网格简单而清晰；-）如何在屏幕上添加文本img@bbousq我不明白。@L-X答案这不是一个好的学习方法，因为添加这样的文本。我可以说布局混乱。@Fiido，你读过问题了吗，他在问如何在图像上显示文本，我的代码着重于此，但你的网格简单而清晰；-）

.image-grid{
background-image:url('http://placehold.it/350x150');
    height:100px;
    position:relative;
}

.text-above{

    position:absolute;
    top:0;
    left:0;

}

.text-below{
    position:absolute;
    bottom:0px;
    left:0;

}

.text-below p{
     margin-bottom: 0px;
}