几张图片水平铺满并中线对齐的响应式代码

本文在这里采取3张图片，然后难度升级，每张图片都有一段字，要求字在每个图片的右下角，当然也要遵循响应式的原理
html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta  name="viewport" content="width=device-width,initial-scale=1">
        <title>响应式代码 </title>
    </head>
    <body>
        <div class="box">
             <div class="box1">
                ![](http://img4.imgtn.bdimg.com/it/u=1824870556,2261394126&fm=21&gp=0.jpg)
                <p>loving animal</p>
            </div>
            <div class="box1">
                <img src="http://upload-images.jianshu.io/upload_images/55072-cd083be460523763.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" />
                <p>pretty girl</p>
            </div>
            <div class="box1">
                ![](http://img1.imgtn.bdimg.com/it/u=4150766536,3683796985&fm=21&gp=0.jpg)
                <p>beautiful flower</p>
            </div>
        </div>
    </body>
</html>

CSS代码：

 .box {
            margin:0;
            font-size: 0;
        }
        .box1 {
            display: inline-block;
            position:relative;
            width:33%;
            vertical-align: middle;
            margin: 0;
        }
        img {
            width:100%;
            margin: 0;
        }
        p {
            position: absolute;
            width: 100%;
            font-size: 20px;
            color:red;
            margin: 0;
            bottom: 0;
            text-align: right;   
        }

output:

output
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容