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

我没有将此规则添加到桌面大小的类中，因为它已经出现在其他 <div> 的下方.

我怎样才能得到这一秒<div>至 clear或倒在第一个<div>下面在平板电脑和手机尺寸？

编辑:尝试添加 float: right到 .container_two分区类。

编辑 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.

以后，避免使用 float ，改用 flexbox。

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

编辑:我还指定了最大高度 30px到容器 <div>在页脚内(最大高度使得高度不能大于 30px)。