css照片墙总结

最新推荐文章于 2024-01-21 20:20:52 发布

不见蝴蝶不见君。

最新推荐文章于 2024-01-21 20:20:52 发布

阅读量347

点赞数

分类专栏： HTML&CSS

本文链接：https://blog.csdn.net/gabby____/article/details/82147810

版权

HTML&CSS 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

今天在做照片墙的时候出现了照片尺寸无法控制这一问题,以下是解决方案：

1、注意图片宽度和边框宽度的关系（即图片宽度<=边框宽度）

2、将边框宽度设置为auto,在<body>里添加clearfix

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
            <meta charset="UTF-8">
            <title></title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
    </script>
<style>
    div.img{
        margin:5px;
        border:1px solid #ccc;
        float:left;
        width:auto;
    }
    div.img:hover{
        border:1px solid #777;
    }
    div.img img{
        width:100%
        height:auto
    }

    div.des{
        padding:15px;
        text-align:center;
    }

</style>
</head>
 <body>
<div>
    <div class="clearfix">
    <div class="img">
        <a target="_blank"href="yoga1.jpg">
            <img src="yoga1.jpg"alt="图片文本描述"width="300"height="180">
        </a>
        <div class="des">yoga1</div>
    </div>
</div>
<div>
    <div class="img">
        <a target="_blank" href="yoga2.jpg">
            <img src="yoga2.jpg"alt="图片文本描述"width="300"height="180">
        </a>
        <div class="des">yoga2</div>
    </div>
</div>
<div>
    <div class="img">
        <a target="_blank"href="yoga3.png">
        <img src="yoga3.png"alt="图片文本描述"width="300"height="180">
        </a>
        <div class="des">yoga3</div>
    </div>
</div>
<div>
    <div class="img">
        <a target="_blank"href="yoga4.jpg">
            <img src="yoga4.jpg"alt="图片文本描述"width="300"height="180">
        </a>
        <div class="des">yoga4</div>
    </div>
</div>
</div>
 </body>
</html>

不见蝴蝶不见君。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css照片墙总结

今天在做照片墙的时候出现了照片尺寸无法控制这一问题,以下是解决方案：1、注意图片宽度和边框宽度的关系（即图片宽度&lt;=边框宽度）2、将边框宽度设置为auto,在&lt;body&gt;里添加clearfix&lt;!DOCTYPE html&gt;&lt;html xmlns="http://www.w3.org/1999/html"&gt;&lt;head&gt; ...
复制链接

扫一扫

专栏目录