將 div 的元素垂直堆疊在一起

Question

我希望 content_container 內的 div 垂直堆疊在一起，而不是重疊。 請幫忙。

我的 HTML 代碼：

<div id=content_container>
    <div id=sub_nav>
    </div>
    <div id=content>
    </div>
</div>

我的 CSS 代碼：

#content_container{
    float: left;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
}

#sub_nav{
    position: fixed;
    width: 100%;
}

#content{
    width: 100%;
}


  [1]: https://i.stack.imgur.com/28184.jpg

Answer 1

你的問題是“位置：固定；” 對於#sub_nav div。 刪除它，他們應該將一個疊放在另一個上面。

Answer 2

HTML

<div id=content_container>
    <div id=sub_nav>
    </div>
    <div id=content>
    </div>
</div>

CSS

#content_container{
    float: left;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
}

#sub_nav{
    position: -webkit-sticky;
    position: sticky;
    top:0;
    width: 100%;
}

#content{
    width: 100%;
}

希望這可以幫助！！

另外，請參閱https://css-tricks.com/snippets/css/a-guide-to-flexbox/以獲取完整的 flexbox 參考。

Answer 3

使用彈性盒會很容易：

 #content_container { display: flex; height: 500px; width: 100%; } #sub_nav { background: red; width: 200px; } #content { flex: 1; background: blue; }

 <div id=content_container> <div id=sub_nav> </div> <div id=content> </div> </div>

Answer 4

嘗試這個...

 #content_container{ width: 100%; height: 100%; display: flex; } #sub_nav{ width: 50%; height: 200px; background-color: red; } #content{ width: 50%; background-color: blue; height: 200px; }

 <body> <div id=content_container> <div id=sub_nav> </div> <div id=content> </div> </div> <body>

Answer 5

使用彈性盒更容易。

 #content_container { display: flex; height: 500px; width: 100%; } #sub_nav { background: white; width: 100px; } #content { flex: 1; background: green; }

 <div id=content_container> <div id=sub_nav> </div> <div id=content> </div> </div>

Answer 6

position: fixed將元素從流中取出並使其固定到視口。 這導致下一個元素重疊。

所以你需要讓固定元素sub_nav顯示在頂部。 並且content將通過在頂部填充或使用相對移動頂部起點來顯示

element{
    position: relative;
    top: 20px;
}

例子

 #content_container { float: left; width: 100%; height: 100%; overflow: auto; text-align: center; } #sub_nav { background-color: yellow; position: fixed; width: 100%; z-index: 1; } #content { background-color: cyan; width: 100%; padding-top: 30px; height: 100px; }

 <div id=content_container> <div id=sub_nav>sub_nav </div> <div id=content>content </div> </div>

將 div 的元素垂直堆疊在一起

問題描述

6 個解決方案

解決方案1
2 2020-01-16 13:26:02

解決方案2
2 已采納 2020-01-16 13:27:54

HTML

CSS

解決方案3
0 2020-01-16 13:22:34

解決方案4
0 2020-01-16 13:30:42

解決方案5
0 2020-01-16 13:42:33

解決方案6
0 2020-01-16 13:49:40

將 div 的元素垂直堆疊在一起

問題描述

6 個解決方案

解決方案1 2 2020-01-16 13:26:02

解決方案2 2 已采納 2020-01-16 13:27:54

HTML

CSS

解決方案3 0 2020-01-16 13:22:34

解決方案4 0 2020-01-16 13:30:42

解決方案5 0 2020-01-16 13:42:33

解決方案6 0 2020-01-16 13:49:40

解決方案1
2 2020-01-16 13:26:02

解決方案2
2 已采納 2020-01-16 13:27:54

解決方案3
0 2020-01-16 13:22:34

解決方案4
0 2020-01-16 13:30:42

解決方案5
0 2020-01-16 13:42:33

解決方案6
0 2020-01-16 13:49:40