如何让这些 div 垂直堆叠？

Posted 2023-02-22

技术标签:

【中文标题】如何让这些 div 垂直堆叠？【英文标题】：How do I get these divs to stack vertically? 【发布时间】：2013-10-10 20:49:20 【问题描述】：

我知道之前有人问过类似的问题，但我已经尝试了所有我能找到的解决方案（其中包括位置：外部 div 上的相对位置和内部 div 上的位置：绝对位置），但我一辈子都做不到我让红色 div 在绿色下面对齐，而不是堆叠在它上面。

<body>
    <div id="outer_div">
         <div id="title_div">
         </div>

        <div id="main_div">
        </div>
    </div>
</body/>

CSS：

body 
    height: 1000px;
    width: 1000px;
    margin: 0;
    padding: 0;


#outer_div 

    position: relative;
    height: 100%;
    width: 100%;
    background-color: blue;
    display: block;
    

#title_div 
    top: 0;
    left: 0;
    position: absolute;
    height: 25%;
    width: 100%;
    background-color: green;
    display: block;


#main_div 
    top: 0;
    left: 0;
    position: absolute;
    height: 20%;
    width: 100%;
    background-color: red;
    display: block;

Here's the jsFiddle link.

谢谢！

【问题讨论】：

div 是块元素，因此从上到下自然流动 - 为什么需要更改它们的默认位置？红色和绿色从 0,0 开始，那么您期望什么？删除除颜色样式之外的所有内容，可能还有高度和宽度，看看会发生什么我已经用一个可能的解决方案更新了你的 jsfiddle (jsfiddle.net/denisonluz/kFaVe/1) @jenson-button-event，你是对的。这将教会我编码迟到，使问题复杂化，然后尝试抽象它。谢谢:) 【参考方案1】：

要让红色 div 显示在绿色 div 下方，请执行以下操作

#main_div

#title_div

"position: absolute;"

"float: left;"

#main_div

#title_div

这将导致每个 div 尽可能向左拉。如果它不能并排放置它们，则第二个会自动推到第一个下方。

【讨论】：

你真的不需要做额外的花车。浮动用于将事物并排放置，这与您想要的相反。但是，是的，这就是答案【参考方案2】：

两个内部 div 的绝对顶部位置相同。有很多方法可以改变这一点，包括允许 div 的自然排序、改变顶部位置等。

【讨论】：