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

本文转载自查看原文 2016-11-22 12:06 2811 布局

<!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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 弹性盒布局、头尾固定中间部分自适应布局 css和css3弹性盒模型实现元素宽度（高度）自适应使用css3的flex盒模型来实现两栏布局（左侧固定宽度，右侧自适应宽度） css样式列表宽度自适应布局 div + css宽度自适应（液态布局） CSS布局——左定宽度右自适应宽度并且等高布局 CSS布局奇淫技巧之-宽度自适应 BFC之宽度自适应布局篇使用flex布局实现宽度自适应 flex 布局 input 宽度不自适应