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（MOBILE）

/*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 style="clear: both;"></div>之后向HTML添加<div>。

Answer 1

关键是要从.container_one中删除高度，然后添加height: initial。请勿在任何物体上放置静态高度。

当您在容器上设置一个高度，然后使其子代漂浮时，将导致它们溢出到容器外。当您浮动div时，它实际上将其与其余DOM元素“分离”，并且从字面上看将它们浮动在顶部，并摆脱了这些元素本应占用的计算空间。 >

将来，请避免浮动并改用flexbox。

使用flexbox可以更轻松地管理列，并且一旦使用它，它的实现也更容易。

编辑：我还为页脚内的容器30px分配了<div>的最大高度（max-height使得该高度不能更大）大于30像素）。

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

1 个答案: