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

作者: 味蕾里的青春 | 来源:发表于2016-08-29 21:23 被阅读24次

几张图片水平铺满并中线对齐的响应式代码
CSS居中大全(带截图)
10.对齐方式
Bootstrap相关
响应式图片如何响应？如何居中？当然是Bootstrap！
Vue 3 响应式原理三 - activeEffect & re
响应式图片
响应式图片
响应式图片
响应式图片

本文在这里采取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="https://img.haomeiwen.com/i55072/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