浮動定位之三列布局問題與發現（上）

oujie 發布于2019-08-30 15:44 / 2779人閱讀

摘要：理想的三列布局效果應該是這樣的但是現實中的情況是側邊欄跑到下一列的右邊去了。源代碼如下源代碼如下錯誤發生在中的安放位置，我們將安置在之后，正確的做法是將放置在之前。為什么調換了位置就好了呢背后的原理是什么呢參考浮動定位之三列布局下

理想的三列布局效果應該是這樣的

但是現實中的情況是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三列式布局浮動定位布局定位絕對定位布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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