弹性盒子
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font: 24px Helvetica;
background: #999999;
}
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: flex;
flex-flow: row;
}
#main>article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
flex: 3 1 60%;
order: 2;
}
#main>nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
flex: 1 6 20%;
order: 1;
}
#main>aside {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
flex: 1 6 20%;
order: 3;
}
header,
footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
</style>
</head>
<body>
<header>header</header>
<div id='main'>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>
</body>
</html>
position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
min-width: 550px;
}
* {
margin: 0;
padding: 0;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
background-color: #ccc;
width: 100%;
}
#left {
background-color: #000;
width: 200px;
position: absolute;
left: 0;
right: 200px;
}
#right {
background-color: red;
width: 150px;
position: absolute;
right: 0;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">111</div>
<div id="container">
<div id="center" class="column">2</div>
<div id="left" class="column">2</div>
<div id="right" class="column">2</div>
</div>
<div id="footer">333</div>
</body>
</html>