浮动定位之三列布局问题与发现（上）

oujie 发布于2019-08-30 15:44 / 2758人阅读

摘要：理想的三列布局效果应该是这样的但是现实中的情况是侧边栏跑到下一列的右边去了。源代码如下源代码如下错误发生在中的安放位置，我们将安置在之后，正确的做法是将放置在之前。为什么调换了位置就好了呢背后的原理是什么呢参考浮动定位之三列布局下

理想的三列布局效果应该是这样的

但是现实中的情况是aside侧边栏跑到下一列的右边去了。

HTML源代码如下：

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之前。

为什么调换了位置就好了呢？背后的原理是什么呢？
参考浮动定位之三列布局（下）https://segmentfault.com/a/11...

GPU云服务器云服务器 extjs三列式布局浮动定位布局定位绝对定位布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116120.html

浮动定位之三列布局问题与发现（下）

摘要：代码如下，分别左浮动和右浮动，是块级元素。注意，浮动元素脱离了文档流，块级元素独占一行。将放置在之后的后果就是所在的那一行已经被独占了，只能顺流到下一行，并在下一行往右浮动。 HTML代码如下： nav，aside分别左浮动和右浮动，main是块级元素。注意，浮动元素脱离了文档流，块级元素独占一行。将aside放置在main之后的后...

Cruise_Chan 2019-08-30 15:44 评论0 收藏0
[译]HTML&CSS Lesson5: 定位

摘要：浮动定位的其中一种方法就是使用属性。例如，是一个内联元素，它默认的值为和值是不生效的。然而，如果我们将这个内联元素设置为浮动，那么它的默认值会变成这时候和值就生效了。包裹元素就是将浮动元素置于父元素中，父元素作为容器会置于正常的文件流中。 CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己...

YorkChen 2019-08-01 17:39 评论0 收藏0
[译]HTML&CSS Lesson5: 定位

摘要：浮动定位的其中一种方法就是使用属性。例如，是一个内联元素，它默认的值为和值是不生效的。然而，如果我们将这个内联元素设置为浮动，那么它的默认值会变成这时候和值就生效了。包裹元素就是将浮动元素置于父元素中，父元素作为容器会置于正常的文件流中。 CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己...

_Dreams 2019-08-29 13:29 评论0 收藏0
构建静态页面之 [ 布局 ]

摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中 + 行内块级元素（text-a...

andot 2019-08-29 16:31 评论0 收藏0
构建静态页面之 [ 布局 ]

摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中 + 行内块级元素（text-a...

JessYanCoding 2019-08-02 16:31 评论0 收藏0