css3屬性flex彈性布局設置三列(四列)分布樣式

本文轉載自查看原文 2016-07-16 18:06 15594 水車的分類--CSS

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    body{
        padding: 0;
        margin: 0;
    }
    .warp{
        position:fixed;
        bottom: 0px;
        display:-webkit-box;
        display:flex;
        display:-ms-flex;
        display:-webkit-flex;
　　　　 width:100%;

    }
    .div1,.div2,.div3{
        height:50px;
        flex:1;
        -ms-flex:1;
        -webkit-flex:1;
        -webkit-box-flex:1;
        position: relative;
        background: #ccc;
        text-align:center;
    }
</style>
<body>
<div class="warp">
    <div class="div1">這是div1</div>
    <div class="div2">這是div2</div>
    <div class="div3">這是div3</div>
</div>
</body>
</html>

效果圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 flex 多行四列多行多列2020年css布局 css3 彈性布局和多列布局談談CSS3中display屬性的Flex布局（彈性布局） CSS3動畫屬性和flex彈性布局各個屬性 CSS3彈性伸縮布局（二）——flex布局 css3彈性伸縮布局(一)—————flex布局 CSS3多列布局 CSS3-flex彈性布局之flex屬性 CSS3——彈性盒模型-flex——等分布局、流式布局、聖杯布局 css3多列布局瀑布流加載樣式