我在本网站的索引页面上有两个主要的<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(桌面)
.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 style="clear: both;"></div>
之后将<div>
添加到HTML。
关键是要从.container_one
移除高度并添加height: initial
。不要把静态高度放在任何东西上。
当您在容器上设置高度但随后浮动其子容器时,它将导致它们溢出容器外部。当你浮动一个div时,它实际上将它与其余的DOM元素“分离”,并且实际上将它们浮动在顶部并且去掉那些元素将占用的计算空间。
将来,请避免浮动并使用flexbox。
使用flexbox可以更轻松地管理列,一旦您使用它,它就更容易实现。
编辑:我还将30px
的最大高度分配给页脚内的容器<div>
(最大高度使得高度不能大于30px)。