亚洲日本欧洲欧美视频,日韩中文字幕有码av,一本一道av中文字幕无码,国产线播放免费人成视频播放,人妻少妇偷人无码视频,日夜啪啪一区二区三区,国产尤物精品自在拍视频首页,久热这里只有精品12

CSS:布局篇_用flex布局實現兩邊頂寬中間自適應(圣杯布局&雙飛翼布局)

<!DOCTYPE html>
<html>
<head>
    <title>CSS:布局篇_用flex布局實現兩邊頂寬中間自適應(圣杯布局&雙飛翼布局)</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{min-width: 700px;}
        .header,.footer{
            border: 1px solid #333;
            background: purple;
            color: white;
            text-align: center;
            height: 50px;
            line-height: 50px;
        }
        .container {
            display: flex;
            
        }
        .left,.middle,.right{
            background-color: aqua;
            min-height: 130px;
            line-height: 130px;
            border: 1px solid #333;
            text-align: center;
        }
        .left{
            flex-basis: 220px;
            order: 1;
        }
        .middle {
            flex: 1;
            order: 2;
        }
        .right{
            flex-basis: 220px;
            order: 3;
        }
    </style>
</head>
<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="container">
        <div class="middle">
            <h4>middle</h4>
        </div>
        <div class="left">
            <h4>left</h4>
        </div>
        <div class="right">
            <h4>right</h4>
        </div>
    </div>
    <div class="footer">
            <h4>footer</h4>
    </div>
</body>
</html>

html

使用浮動實現《CSS:布局篇_兩邊頂寬中間自適應(圣杯布局&雙飛翼布局)》見→http://www.rzrgm.cn/runrunrun/p/11506650.html

思考

-如果向類為middle的div添加數個<h4>middle</h4>，left，right的div為什么會與middle同一高度？

//如果一些元素比其他元素高，那么元素會沿交叉軸被拉伸來填滿它的大小。

答案

參考flex的基本概念→https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

posted @ 2019-09-22 01:23 潤潤潤閱讀(621) 評論(0) 收藏舉報

刷新頁面返回頂部

潤潤潤

CSS:布局篇_用flex布局實現兩邊頂寬中間自適應(圣杯布局&雙飛翼布局)

CSS:布局篇_用flex布局實現兩邊頂寬中間自適應(圣杯布局&雙飛翼布局)

公告