如何使用css实现类似图片画廊的图片排序

发布时间：2020-07-13 18:04:37 作者：Leah
来源：亿速云阅读：247

如何使用css实现类似图片画廊的图片排序？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8"> 
        <title>自学教程(如约智惠.com)</title> 
        <style >
            div.img {
                margin:5px;
                border:1px solid #ccc;
                float:left;
                width:180px;
            }
            
            div.img:hover{
                border:1px solid #777;
            }
            
            div.img img {
                width: 100%;
                height: auto;
            }
 
            div.desc {
                padding: 15px;
                text-align: center;
            }
            
        </style>
    </head>
    <body>
        <div class="responsive">
          <div class="img">
            <a target="_blank" href="https://cache.yisu.com/upload/information/20200318/93/13689.jpg">
              <img src="https://cache.yisu.com/upload/information/20200318/93/13689.jpg" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">这里添加图片文本描述</div>
          </div>
        </div>
         
        <div class="responsive">
          <div class="img">
            <a target="_blank" href="https://cache.yisu.com/upload/information/20200318/93/13690.jpg">
              <img src="https://cache.yisu.com/upload/information/20200318/93/13690.jpg" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">这里添加图片文本描述</div>
          </div>
        </div>
         
        <div class="responsive">
          <div class="img">
            <a target="_blank" href="https://cache.yisu.com/upload/information/20200318/93/13691.jpg">
              <img src="https://cache.yisu.com/upload/information/20200318/93/13691.jpg" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">这里添加图片文本描述</div>
          </div>
        </div>
         
        <div class="responsive">
          <div class="img">
            <a target="_blank" href="https://cache.yisu.com/upload/information/20200318/93/13692.jpg">
              <img src="https://cache.yisu.com/upload/information/20200318/93/13692.jpg" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">这里添加图片文本描述</div>
          </div>
        </div>
    </body>
</html>

关于如何使用css实现类似图片画廊的图片排序问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。

如何使用css实现类似图片画廊的图片排序

相关阅读