css实现网页布局，三个div并排显示
css实现网页布局，三个div并排显示
主要使用到display：inline-block来处理,在位置够用的情况下，用这个方法就可以实现，三个或多个div并排 以及在article和footer部分的边距问题上，使用对父级元素设置**font-size：0；**来处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
font-size: 0;
}
*{
margin: 0;
padding: 0;
}
header{
background: red;
width: auto;
height: 200px;
}
aside{
/* display: inline-block;将块级元素转化为行内块级元素 */
display: inline-block;
width: 10%;
height: 500px;
background-color: rosybrown;
}
section{
display: inline-block;
height: 500px;
background-color: sandybrown;
width: 80%;
}
footer{
width: 100%;
height: 100px;
background-color: royalblue;
}
</style>
<body>
<header></header>
<article>
<aside id="left"></aside>
<section id="con"></section>
<aside id="right"></aside>
</article>
<footer></footer>
</body>
</html>
