当浏览器响应时，强制第二个 Div 折叠在第一个 Div 之下

Question

我在这个网站的索引页上有两个主要的<divs>：

http://htmlmesomething.drawyourpets.com/

我正在尝试使第二个容器/ div（及其内容）在平板电脑和移动设备尺寸的第一个 div 的内容下方折叠。

HTML

<div class="container_one">

<section id="column_one">
    <h1>Bruce</h1>
    <img src="images/bruce.jpg"/>
    <p>Bruce was a red tailed black shark who died from accidental poisoning.
         We were given bad instructions from a store owner on how to properly use cleaning
          solution for his aquarium, and the rapid increase in PH levels caused Bruce to 
         suffocate within minutes.</p>
</section>

<section id="column_two">
    <h1>Captain</h1>
    <img src="images/captain.jpg"/>
    <p>Captain was a yellow lab who died from congestive heart failure. He 
        had been on medication for his condition, and it had likely kept him alive
         for years, until eventually he became too obese for the medication to take effect,
        and he died suddenly.
         </p>
</section>

<section id="column_three">
    <h1>Tigger</h1>
    <img src="images/tigger.jpg"/>
    <p>Tigger was a red Tabby cat who struggled with obesity. He died on Christmas
        when a blood clot to the brain caused him to collapse and have a siezure.</p>
</section>

</div><!--ends first container-->

<div class="container_two">

<section id="solo_column">
    <img id="slip" onmouseover="this.src='images/slip2.jpg'" onmouseout="this.src='images/slip1.jpg'" height="100px" width="100px" src="images/slip1.jpg">
</section>

</div><!--ends second container-->

CSS (DEKSTOP)

.container_one {
padding: 5px;
width: 960px;
height:340px;
margin: 20px auto;
}

.container_two {
padding: 5px;
width: 960px;
height:340px;
margin: 20px auto;
}

#column_one {
width: 290px;
float: left;
padding: 20px 15px;
text-align:center;
background-color:#E8E6E6;
border: solid 1px grey;
}

#column_two {
width: 294px; /*Account for margins, border values*/
float: left;
padding: 20px 15px; 
margin: 0px 5px 5px 5px;
text-align:center;
background-color:#E8E6E6;
border: solid 1px grey;
}

#column_three {
width: 270px;
float: left;
padding: 20px 15px;
text-align:center;
background-color:#E8E6E6;
border: solid 1px grey;
}

#solo_column {
width: 100%;
float: none;
padding: 20px 15px;
text-align:center;
}

.footer_info {
text-align:center;
margin-top:35px;
}

CSS（平板电脑）：

/*980px or less*/
@media screen and (max-width: 980px) {

div, section {
    display:block;
    height:320px
}

.container_one {
    width: 94%;
}

.container_two {
    width: 94%;
    clear:both;
    float: right;
}

#column_one {
    width: 41%;
    padding: 1% 4%;
    height: 355px;
}

#column_two {
    width: 41%;
    padding: 1% 4%;
    margin: 0px 0px 12px 5px;
    float: right;
    height: 355px;
}

#column_three {
    clear: both;
    padding: 1% 4%;
    width: auto;
    float: none;
}

header, footer {
    padding: 1% 4%;
}
article {
    margin-top:50px;
}   
footer, .footer_info {
    clear:both;
    margin-top:205px;
}
}

CSS（平板电脑）

/* for 600px or less */
@media screen and (max-width: 600px) {

#column_one {
    width: auto;
    float: none;
    margin-bottom: 12px;
}

#column_two {
    width: auto;
    float: none;
    margin-left: 0px;
}

#column_three {
    width: auto;
    float: none;
}

#solo_column {
    width: auto;
    float: none;
}

footer, .footer_info {
    clear:both;
    margin-top:405px!important;
}

.container_two {
    clear:both;
    float: right;
}

}

CSS（移动）

/*for 480px or less*/
@media screen and (max-width: 480px) {

#column_one {
    height: 385px;
}
#column_two {
    height: 385px;
}
#column_three {
    height: 385px;
}
#solo_column {
    height: 385px;
}
h1 {
    font-size: 2em;
}
footer .footer_info {
    clear:both;
    margin-top:500px!important;
}

.container_two {
    clear:both;
    float: right;
}

}

我尝试将clear:both 添加到container_two 类。

我没有将此规则添加到桌面大小的课程中，因为它已经出现在另一个 <div> 下方。

如何在平板电脑和手机尺寸下将第二个<div> 转换为clear 或折叠在第一个<div> 之下？

编辑：尝试将float: right 添加到.container_two div 类。

编辑 2：还尝试在第一个 <div> 之后将 <div style="clear: both;"></div> 添加到 HTML 中。

Answer 1

关键是从.container_one 中删除高度并添加height: initial。不要在任何东西上放置静态高度。

当您在容器上设置高度，但随后浮动其子级时，会导致它们溢出容器外。当您浮动一个 div 时，它实际上将它与其他 DOM 元素“分离”，并且 字面意思 将它们浮动在顶部并摆脱了这些元素会占用的计算空间。 p>

以后，避免浮动并改用 flexbox。

使用 flexbox 更容易管理列，并且一旦您使用它，它就更容易实现。

编辑：我还将30px 的最大高度分配给页脚内的容器<div>（最大高度使高度不能大于30px）。