共计 874 个字符,预计需要花费 3 分钟才能阅读完成。
理想的三列布局效果应该是这样的
但是现实中的情况是 aside 侧边栏跑到下一列的右边去了。
HTML 源代码如下:
<div id="root">
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>
</div>
CSS 源代码如下:
#root {
padding: 20px;
background: lightblue;
}
header {
height: 80px;
width: 100%;
border: 1px solid #aaaaaa;
margin-bottom: 20px;
background: white;
}
nav {
width: 20%;
height: 100%;
float: left;
border: 1px solid #aaaaaa;
background: white;
background: white;
}
main {
width: auto;
height: 100%;
border: 1px solid #aaaaaa;
margin-left: 25%;
margin-right: 25%;
background: white;
}
aside {
width: 20%;
height: 100%;
float: right;
border: 1px solid #aaaaaa;
background: white;
}
footer {
height: 80px;
width: 100%;
border: 1px solid #aaaaaa;
margin-top: 20px;
background: white;
}
错误发生在 HTML 中 aside 的安放位置,我们将 aside 安置在 main 之后,正确的做法是将 aside 放置在 main 之前。
<div id="root">
<header></header>
<nav></nav>
<aside></aside>
<main></main>
<footer></footer>
</div>
为什么调换了位置就好了呢?背后的原理是什么呢?
参考 浮动定位之三列布局(下)https://segmentfault.com/a/11…
正文完