4
我有一個很好的註腳，但是當我粘貼在它重疊它上面的DIV（這是一個移動網站。）頁腳重疊列格
這是它看起來像我的手機上：
這就是我想要它看起來像：
而這方面的箱子此刻的代碼：
<div class="area-blocks">
<div class="box-area col-xs-6">
<div class="area-box">
<div class="col-xs-8">
<div class="area-file-name">
<span>
Bike trips on lombok
</span>
</div>
</div>
<div class="col-xs-4">
<div class="area-file-type">
<img src="includes/img/pdf.png" alt="">
</div>
</div>
</div>
</div>
<div class="box-area col-xs-6">
<div class="area-box">
<div class="col-xs-4">
<div class="area-file-type">
<img src="includes/img/pdf.png" alt="">
</div>
</div>
<div class="col-xs-8">
<div class="area-file-name">
<span>
Bike trips on lombok
</span>
</div>
</div>
</div>
</div>
<div class="box-area col-xs-6">
<div class="area-box">
<div class="col-xs-8">
<div class="area-file-name">
<span>
Bike trips on lombok
</span>
</div>
</div>
<div class="col-xs-4">
<div class="area-file-type">
<img src="includes/img/pdf.png" alt="">
</div>
</div>
</div>
</div>
<div class="box-area col-xs-6">
<div class="area-box">
<div class="col-xs-4">
<div class="area-file-type">
<img src="includes/img/pdf.png" alt="">
</div>
</div>
<div class="col-xs-8">
<div class="area-file-name">
<span>
Bike trips on lombok
</span>
</div>
</div>
</div>
</div>
<div class="box-area col-xs-6">
<div class="area-box">
<div class="col-xs-8">
<div class="area-file-name">
<span>
Bike trips on lombok
</span>
</div>
</div>
<div class="col-xs-4">
<div class="area-file-type">
<img src="includes/img/pdf.png" alt="">
</div>
</div>
</div>
</div>
<div class="box-area col-xs-6">
<div class="area-box">
<div class="col-xs-4">
<div class="area-file-type">
<img src="includes/img/pdf.png" alt="">
</div>
</div>
<div class="col-xs-8">
<div class="area-file-name">
<span>
Bike trips on lombok
</span>
</div>
</div>
</div>
</div>
</div>
而CSS爲：
.box-area {
background-color: #BA5e8e;
padding-right: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
/* this is the boxes to align to the right */
.box-area:nth-child(2n) {
border-radius: 10px 0 0 10px;
}
和腳註代碼：
<div id="footer">
<div class="container">
<div class="footer-top">
<h1>Villa Campi Sorga</h1>
</div>
<div class="footer-left">
<h2>Say Hello<br>to Rik Studios</h2>
<form role="form" method="post" action="/index.php" id="footercontact" novalidate="novalidate">
<fieldset>
<div class="row">
<div class="form-group col-sm-6">
<input type="text" name="contactname" id="contactname" value="" class="form-control input-sm required" role="input" aria-required="true" data-placement="top" placeholder="YOUR NAME">
</div>
<div class="form-group col-sm-6">
<input type="email" name="email" id="email" value="" class="form-control input-sm required email" role="input" aria-required="true" data-placement="top" placeholder="YOUR EMAIL">
</div>
</div>
<div class="form-group">
<textarea type="text" rows="8" name="message" id="message" class="form-control input-sm required" role="textbox" aria-required="true" data-placement="top" placeholder="YOUR MESSAGE..."></textarea>
</div>
<div class="row">
<div class="form-group col-sm-6">
<input type="submit" value="SEND TO US" name="submit" id="submitButton" class="button" title="Click to send!">
</div>
</div>
</fieldset>
</form>
</div>
<div class="footer-right">
<h2>How to<br>find us</h2>
<p>Want to talk? Nice, we are ready to chat about your ideas, while sipping a cup of coffee (or tea if you like). </p>
<ul>
<li>Snelliusweg 40-15</li>
<li>6827 DH Arnhem</li>
<li>The Netherlands</li>
<li><a href="tel:+31267074344">+31(0)26 70 74 344</a></li>
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
</div>
</div>
</div>
及其產生的CSS：
/* TEXT STYLE *************************/
#footer h2 {
color: #FFFFFF;
margin-bottom: 20px;
}
h2 {
color: #000000;
font-size: 24px;
font-weight: 700;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
margin-top: 0px;
}
/* FOOTER *****************************/
fieldset {
border: 0px !important;
}
#footer {
position:relative;
background: url(http://www.axastudios.com/images/bg-footer.jpg) bottom center #000000;
background-size: cover;
color: #777777;
padding-bottom: 50px;
border-bottom: 1px solid #000000;
}
.footer-top {
position: relative;
padding: 60px 0px 60px 0px;
text-align: center;
font-size: 30px;
}
.footer-top h1{
display: inline-block;
font-family: sunshine;
color: #fff;
}
.footer-left, .footer-right{
position:relative;
float: left;
width: 50%;
}
.footer-left{
padding-right: 20px;
}
#footer h2{
color: #FFFFFF;
margin-bottom: 20px;
}
#footer h2:after{
color: #FFFFFF;
}
#footercontact{
position: relative;
padding-top: 10px;
}
#footer .form-group {
margin-bottom: 30px;
}
#footer input.button:hover {
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.7);
-webkit-animation: btn-animate 0.2s ease-in-out;
-ms-animation: btn-animate 0.2s ease-in-out;
animation: btn-animate 0.2s ease-in-out;
}
#footer input.button {
position: relative;
cursor: pointer;
color: #FFFFFF;
line-height: 20px;
font-size: 16px;
font-weight: 700;
border: 1px solid #FFFFFF;
border-radius: 0px;
outline: none;
background: none;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}
input.button, .btn-primary {
position: relative;
margin: 0;
height: 40px;
padding: 0px 30px 0px 30px;
}
#footer .form-control {
display: block;
width: 100%;
height: 50px;
padding: 10px 15px;
font-size: 14px;
line-height: 1.42857;
color: #777;
background: none;
border: 1px solid #999;
border-radius: 0px;
box-shadow: none;
margin:0 !important;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
#footer .form-control:focus {
border-color: rgba(186, 94, 142, 255) !important;
outline: 0px none;
box-shadow: none;
}
#footer textarea.form-control {
display: block;
height: 150px;
width: 100%!important;
}
#footer ::-webkit-input-placeholder {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
color: #555555;
font-weight: 700;
}
#footer :-moz-placeholder {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
color: #555555;
font-weight: 700;
}
#footer ::-moz-placeholder {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
color: #555555;
font-weight: 700;
}
#footer :-ms-input-placeholder {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
color: #555555;
font-weight: 700;
}
#footer .button{
display: block;
width: 100%;
height: 50px;
border: 1px solid #999;
}
.footer-right{
padding-left: 120px;
font-size: 16px;
line-height: 30px;
float: right
}
.footer-right ul{
list-style: none;
background: url(http://www.axastudios.com/images/icon-pointer.png) left 5px no-repeat;
background-size: 22px;
padding-left: 40px;
margin-bottom: 10px;
}
#footer-copyright{
background: #1c1c1c;
border-top: 1px solid #2b2b2b;
}
.copyright{
padding: 40px 0px;
text-transform: uppercase;
color: #777777;
font-size: 12px;
}
.footer-right a{
color: #777777;
}
.footer-right a:hover{
color: #ed1c24;
}
.details > p:nth-child(1) {
margin-top: 40px;
}
.copyright {
text-align: center;
}
@media (max-width: 767px) {
.footer-top {
position: relative;
padding: 60px 40px 60px 40px;
}
.footer-left, .footer-right {
position: relative;
float: none;
width: 100%;
padding: 0px 25px;
margin-bottom: 40px;
}
a.button{
display: block;
}
.mob-break{
display: inline;
}
}
很抱歉，如果我包含了太多的代碼，但我不知道問題在哪裏。
在此先感謝！ 〜裏克
這不能是整個代碼。也許你有一個鏈接到您的網站？ –
這確實不是整個代碼。這裏：http：//campi.nijdeken.com/mobile/ – Rik
似乎你解決了這個問題，現在看起來不錯。 –