您的位置：首页 > Web前端 > CSS

Html+CSS三栏式伸缩布局

2017-12-21 14:07 99 查看

三栏式伸缩布局的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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html css 布局
相关文章推荐
新的分享
章节导航