三栏布局问题及浮动定位的发现(上)
时间:2023-03-30 18:31:00
CSS
理想的三栏布局效果应该是这样的,但现实是aside侧边栏跑到了下一栏的右边。HTML源码如下:
CSS源码如下:#root{padding:20px;背景:浅蓝色;}标题{高度:80px;宽度:100%;边框:1px实心#aaaaaa;底部边距:20px;背景:白色;}导航{宽度:20%;高度:100%;向左飘浮;边框:1px实心#aaaaaa;背景:白色;背景:白色;}main{宽度:自动;高度:100%;左:25%;边际权利:25%;背景:白色;}aside{宽度:20%;高度:100%;浮动:对;边框:1px实心#aaaaaa;背景:白色;}页脚{高度:80px;宽度:100%;边框:1px实心#aaaaaa;顶部边距:20px;background:white;}错误出现在HTML中aside的位置。我们在主要之后放在一边。正确的做法是放在main之前的aside。
为什么呢改变了位置如何?它背后的原理是什么?参考浮动定位的三栏布局(下)https://segmentfault.com/a/11...