Html+CSS三栏式伸缩布局

2024年1月24日 38次阅读 来源: haeasringnar

三栏式伸缩布局的Html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style> .wrapper{ display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex; display:flex;-webkit-flex-flow:row wrap;font-weight:bold;text-align:center} .wrapper > *{ padding:10px;flex:1 100%} .header{ background:tomato} .footer{ background:lightgreen} .main{ text-align:left;background:deepskyblue;} .aside-1{ background:gold} .aside-2{ background:hotpink} @media all and (min-width:600px){ .aside{ flex:1 auto}/*让所有灵活的项目都带有相同的长度，忽略它们的内容：*/ }@media all and (min-width:800px){ .main{ flex:2 0px} .aside-1{ order:1}/*用整数值来定义排列顺序，数值小的排在前面。可以为负值*/ .main{ order:2} .aside-2{ order:3} .footer{ order:4} } </style>        
    </head>
    <body>
        <div class="wrapper">
            <header class="header">Header</header>
            <article class="main">
                <p>这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，
                    这是内容区域，这是内容区域，这是内容区域，这是内容区域，这是内容区域，</p>
            </article>
            <aside class="aside aside-1">Aside 1</aside>
            <aside class="aside aside-2">Aside 2</aside>
            <footer class="footer">Footer</footer>
        </div>
    </body>
</html>
    原文作者：haeasringnar
    原文地址: https://blog.csdn.net/haeasringnar/article/details/78863160
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞