当浏览器响应时，强制第二个 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 class。

我没有将此规则添加到桌面尺寸的 class，因为它已经显示在另一个 <div> 的下方。

如何在平板电脑和移动设备尺寸下将第二个 <div> 变为 clear 或折叠到第一个 <div> 之下？

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

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

Answer 1

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

When you set a height on a container, but then float its children, it will cause them to spill outside of the container. When you float a div, it actually "detaches" it from the rest of the DOM elements and quite literally floats them on top and gets rid of the calculated space that those elements would have taken up.

以后避免浮动，改用 flexbox。

Columns are way easier to manage using flexbox and once you play around with it it's easier to implement.

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

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

Force Second Div To Collapse Beneath First Div When Browser Responds

html

css

containers

css-float