CSS 如何在容器 div 中將一個 div 垂直放在另一個下方
[英]CSS how to put one div vertically under another within a container div
問題描述
我有一個容器 div，我想在其中放入另外兩個 div。 我見過很多例子，但它們似乎並肩做。 除了純 css，我什么都不能用。 實際上，還有一些其他設置可以使其與所有移動設備兼容，並使所有內容居中。
到目前為止，我嘗試過的接近的是下面的內容，現在的結果是該子部分嵌入在部分 div 中並居中。 我需要子部分位於部分 div 下，同時仍保持部分 div 的內容可滾動。
.container{
display:flex
height:inherit
position:relative
}
.section{
overflow:auto
height:100%
position:absolute
}
.subsection{
position:absolute
}
<div class="container">
<div class="section"></div>
<div class="subsection"></div>
</div>
4 個解決方案
解決方案1
0 2020-05-15 02:50:09
默認一個 div 占一行，你可以這樣寫代碼
<div>
<div>up div</div>
<div>down div</div>
</div>
向下的 div 將低於向上的 div，不需要額外的 css。
解決方案2
0 2020-05-15 02:53:55
我希望這段代碼有幫助。 您應該為您的 div 指定高度以查看正確的結果。
<!DOCTYPE html>
<html>
<head>
<style>
.section {
height: 50px;
background-color: red
}
.subsection {
height: 50px;
background-color: blue
}
</style>
</head>
<body>
<div class="container">
<div class="section"></div>
<div class="subsection"></div>
</div>
</body>
</html>
解決方案3
0 2020-05-15 03:00:15
這很簡單。 請參閱為您創建的 JSFIDDLE。 更改 css 之類的（添加圖像以顯示示例，因為 div 很少為空：D）
css
.container{
/* float: left; */
display: block;
width: 30%;
}
.section {
height: 200px;
border-style: solid;
border-width: 5px;
border-color: green;
overflow: hidden;
left: 0;
}
.abs {
position: absolute;
}
.rel {
position: relative;
}
.slider img {
width: 100%;
}
.subsection{
border: 2px solid red;
}
HTML
<div class="container">
<div class="section rel">
<p>
# RELATIVE SLIDER
</p>
<img src="https://via.placeholder.com/200x50" />
</div>
<div class="subsection rel">
<p>
# RELATIVE CONTENT
</p>
sample text
</div>
</div>
解決方案4
0 2020-05-15 04:52:05
我能夠通過放置.subSection{Position:fixed; bottom:0}來完成我所需要的。 .subSection{Position:fixed; bottom:0} 。
這使小節div固定在頁面底部，而節div仍然滾動。
如何使用CSS將容器div置於菜單下
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.