弹性盒布局-宽度自动分配-图片自适应

最新推荐文章于 2022-09-02 09:13:00 发布

weixin_30522095

最新推荐文章于 2022-09-02 09:13:00 发布

阅读量1.3k

点赞数

原文链接：http://www.cnblogs.com/heyiming/p/6088714.html

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒布局-宽度自动分配-图片自适应</title>
    <style>
        *{ margin:0; padding:0}
        #parent { width:100%; background:#999; display:-webkit-box; height:auto;}
        #parent div { margin:5px;}
        /*将盒子进行平均分配的主要代码*/
        /*.son1{ -webkit-box-flex:1; }*/
        /*.son2{ -webkit-box-flex:1; }*/
        /*.son3{ -webkit-box-flex:1; }*/
        /*.son3{ -webkit-box-flex:3; } */  /*假如此处为3，则此盒子是整个大盒子一块的1/3*/
        .son1 img,.son2 img,.son3 img{
            width:100%;
            height: 100%;
        }
        .son1,.son2,.son3{
            position: relative;
            -webkit-box-flex:1;
        }
        .son1 span,.son2 span,.son3 span{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top:0;
            margin: auto;
            text-align: center;
            width: 100%;
            height: 20px;
            white-space:nowrap;/*禁止文字自动换行*/
        }
    </style>
</head>
<body>
        <div id="parent">
            <div class="son1">
                <img src="test_img/111.jpg" alt=""/>
                <span>内容区1的文字介绍</span>
            </div>
            <div class="son2">
                <img src="test_img/111.jpg" alt=""/>
                <span>内容区2的文字介绍</span>
            </div>
            <div class="son3">
                <img src="test_img/111.jpg" alt=""/>
                <span>内容区3的文字介绍</span>
            </div>
        </div>
</body>
</html>

转载于:https://www.cnblogs.com/heyiming/p/6088714.html

weixin_30522095

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹性盒布局-宽度自动分配-图片自适应

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>弹性盒布局-宽度自动分配-图片自适应</title> <style> *{ margin:0; padding:0}...
复制链接

扫一扫