浮動(dòng)定位之三列布局問(wèn)題與發(fā)現(xiàn)（上）

oujie 發(fā)布于2019-08-30 15:44 / 2792人閱讀

摘要：理想的三列布局效果應(yīng)該是這樣的但是現(xiàn)實(shí)中的情況是側(cè)邊欄跑到下一列的右邊去了。源代碼如下源代碼如下錯(cuò)誤發(fā)生在中的安放位置，我們將安置在之后，正確的做法是將放置在之前。為什么調(diào)換了位置就好了呢背后的原理是什么呢參考浮動(dòng)定位之三列布局下

理想的三列布局效果應(yīng)該是這樣的

但是現(xiàn)實(shí)中的情況是aside側(cè)邊欄跑到下一列的右邊去了。

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;
}

錯(cuò)誤發(fā)生在HTML中aside的安放位置，我們將aside安置在main之后，正確的做法是將aside放置在main之前。

為什么調(diào)換了位置就好了呢？背后的原理是什么呢？
參考浮動(dòng)定位之三列布局（下）https://segmentfault.com/a/11...

GPU云服務(wù)器云服務(wù)器 extjs三列式布局浮動(dòng)定位布局定位絕對(duì)定位布局

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116120.html

相關(guān)文章

浮動(dòng)定位之三列布局問(wèn)題與發(fā)現(xiàn)（下）

摘要：代碼如下，分別左浮動(dòng)和右浮動(dòng)，是塊級(jí)元素。注意，浮動(dòng)元素脫離了文檔流，塊級(jí)元素獨(dú)占一行。將放置在之后的后果就是所在的那一行已經(jīng)被獨(dú)占了，只能順流到下一行，并在下一行往右浮動(dòng)。 HTML代碼如下： nav，aside分別左浮動(dòng)和右浮動(dòng)，main是塊級(jí)元素。注意，浮動(dòng)元素脫離了文檔流，塊級(jí)元素獨(dú)占一行。將aside放置在main之后的后...

Cruise_Chan 2019-08-30 15:44 評(píng)論0 收藏0
[譯]HTML&CSS Lesson5: 定位

摘要：浮動(dòng)定位的其中一種方法就是使用屬性。例如，是一個(gè)內(nèi)聯(lián)元素，它默認(rèn)的值為和值是不生效的。然而，如果我們將這個(gè)內(nèi)聯(lián)元素設(shè)置為浮動(dòng)，那么它的默認(rèn)值會(huì)變成這時(shí)候和值就生效了。包裹元素就是將浮動(dòng)元素置于父元素中，父元素作為容器會(huì)置于正常的文件流中。 CSS最大的用處之一就是可以將內(nèi)容和元素定位到任何我們想要的位置，使我們的設(shè)計(jì)具有結(jié)構(gòu)，使內(nèi)容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...

YorkChen 2019-08-01 17:39 評(píng)論0 收藏0
[譯]HTML&CSS Lesson5: 定位

摘要：浮動(dòng)定位的其中一種方法就是使用屬性。例如，是一個(gè)內(nèi)聯(lián)元素，它默認(rèn)的值為和值是不生效的。然而，如果我們將這個(gè)內(nèi)聯(lián)元素設(shè)置為浮動(dòng)，那么它的默認(rèn)值會(huì)變成這時(shí)候和值就生效了。包裹元素就是將浮動(dòng)元素置于父元素中，父元素作為容器會(huì)置于正常的文件流中。 CSS最大的用處之一就是可以將內(nèi)容和元素定位到任何我們想要的位置，使我們的設(shè)計(jì)具有結(jié)構(gòu)，使內(nèi)容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...

_Dreams 2019-08-29 13:29 評(píng)論0 收藏0
構(gòu)建靜態(tài)頁(yè)面之 [ 布局 ]

摘要：布局描述表示對(duì)頁(yè)面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級(jí)元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級(jí)設(shè)置屬性為子級(jí)設(shè)置屬性注意的問(wèn)題屬性是設(shè)置文本內(nèi)容對(duì)齊方式的布局描述表示對(duì)頁(yè)面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中 + 行內(nèi)塊級(jí)元素（text-a...

andot 2019-08-29 16:31 評(píng)論0 收藏0
構(gòu)建靜態(tài)頁(yè)面之 [ 布局 ]

摘要：布局描述表示對(duì)頁(yè)面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級(jí)元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級(jí)設(shè)置屬性為子級(jí)設(shè)置屬性注意的問(wèn)題屬性是設(shè)置文本內(nèi)容對(duì)齊方式的布局描述表示對(duì)頁(yè)面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中 + 行內(nèi)塊級(jí)元素（text-a...

JessYanCoding 2019-08-02 16:31 評(píng)論0 收藏0