彈性盒布局-寬度自動分配-圖片自適應

本文轉載自查看原文 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 寬度不自適應