在 HTML 中以网格或背包样式显示图像答案

【问题标题】：Displaying images in a grid or backpack style in HTML在 HTML 中以网格或背包样式显示图像
【发布时间】：2015-10-21 07:19:18
【问题描述】：

我不知道如何以网格样式显示图像，例如带有文本的 tf2 背包，例如 http://i.stack.imgur.com/bVTaJ.png 我已经有了图像，我只需要帮助使它们在网格上与图像上的文本相吻合。代码：http://jsfiddle.net/w5dLvqjq/

<body>
<nav class="navbar navbar-default">
    <div id="navbar" class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

                </button>
            </div>
            <div class="collapse navbar-collapse navbar-menubuilder">
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="#">Login</a>

                    </li>
                    <li><a href="#">Seach backpacks</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<!-- jQuery -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

【问题讨论】：

在此处粘贴您的 html 或 jsfiddle 链接。请显示一些代码
为图像的包装 div 指定宽度并将其向左浮动
@danish443 我没有任何代码，我完全迷路了，但到目前为止我的网站已经发布，它只是一个基本的引导网站

标签： html css image text grid

【解决方案1】：

由于您使用的是引导程序。除非您了解 col 网格系统，否则您可以在这里使用它，您可以从这个 url (http://getbootstrap.com/css/#grid

在您的正文 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>

在你的 CSS 添加

.thumbnail {
    margin-bottom:7px;
}

这里你会得到结果。 (http://www.bootply.com/EgguyY7Dfl)

希望你能学到一些东西。 :)

【讨论】：

如何在 img 上添加文字
@bbousq 我不明白。
@L-X 回答这不是学习的好方法，因为添加这样的文本。我可以说布局凌乱。
@Fiido，你读过这个问题吗，他在问如何在图像上显示文本，我的代码专注于这个，但你的网格更简单更干净;-)

【解决方案2】：

更新好吧，您可以设置很多样式并使用位置属性来实现上下文字的效果

<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>

自定义.css

.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;
}

【讨论】：