我在网页上有一个页脚。一些版权文本漂浮在页面左侧,右侧有一些页脚元素。移动到响应式时,版权 div 应堆叠在其余页脚详细信息下方。除了当您移动到 640 以下然后再次返回更大的 View 时,所有这些都工作正常。 float 的 div 位于其他页脚元素下方。
这是 chrome 而非 IE 的问题。
参见 Codepen这里。
HTML:
<div id="footerSectionWrapper">
<div id="footerSection">
<ul id="footerList">
<li class="details">
<p> details text </p>
</li>
<li class="contact">
<p> contact number: 123</p>
</li>
<li class="resources">
<p> Some links! </p>
</li>
<li class="services">
<p> Other stuff!</p>
</li>
</ul>
<div id="copyrightSection">
<p> Copyright text</p>
</div>
<div class="clear"></div>
</div><!--/footerSection-->
<div class="clear"></div>
</div><!--/footerSectionWrapper-->
CSS:
#footerSectionWrapper {
width: 100%;
background-color: green;
vertical-align: top;
padding: 20px 0px;
}
#footerSection {
background-color:red;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-top: 10px;
}
#footerList {
background-color: blue;
list-style-type: none;
display: block;
margin: 0px auto;
text-align: center !important;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
#footerList li {
background-color: lightblue;
border: 1px solid darkblue;
display: inline-block;
width: 90%;
height: auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 10px 0px;
border-bottom: 1px solid #CCC;
margin: auto;
}
#copyrightSection {
background-color:yellow;
width: 100%;
display: block;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
text-align: center;
}
@media all and (min-width:641px){
#footerList {
list-style-type: none;
width: 50%;
display: inline-block;
margin: 0px;
}
#footerList li {
display: inline-block;
width: 49%;
float: left;
height: 150px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-left: 1px solid #CCC;
padding: 10px 10px 10px 20px;
text-align: left;
}
#footerList li.details, li.contact {
border-bottom: 1px solid #CCC;
padding-top: 50px !important;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#footerList li.services, li.resources {
padding-bottom: 250px !important;
border-bottom: none !important;
}
#copyrightSection {
width: 39%;
display: inline-block;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
float: left;
text-align: left;
}
}
最佳答案
将 float:left 也设置为顶部的通用 css,而不仅仅是在媒体查询中。
#copyrightSection {
background-color:yellow;
width: 100%;
display: block;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
text-align: center;
float:left;
}
检查这支笔。 http://codepen.io/alexincarnati/pen/ctAud
也将 float:left; 添加到媒体查询之外的#copyrightSection 的第一组 css 规则中。
关于html - 移动到响应和返回后 Div 不能正确 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24792006/