3
웹 페이지에 꼬리말이 있습니다. 일부 저작권 텍스트는 페이지 왼쪽에 뜨며 오른쪽에는 몇 개의 꼬리말 항목이 있습니다. 저작권 div는 반응 형으로 이동할 때 나머지 꼬리말 세부 정보 아래에 쌓여 야합니다. 640보다 아래로 이동 한 다음 다시 큰보기로 돌아갈 때를 제외하고는이 모든 것이 올바르게 작동합니다. 떠 다니는 div는 다른 꼬리말 항목 아래에 위치합니다.반응식으로 이동 한 후 Div가 올바르게 이동하지 않음
이것은 크롬 문제이지만 IE는 아닙니다.
여기에서 Codepen을 참조하십시오.
HTML :
CSS는<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-->
:
#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;
}
}
효과가 있었나요? :) –
했습니다. 감사합니다 @AlexIncarnati –
당신은 환영합니다 :) 다행! –