如下所示,一个div
正在转移另一个.body {
margin: 0px;
background-image: url(../images/background.png)
}
.tbl1 {
font-family: Trebuchet MS;
font-size: 12px;
color: #000;
background-color: #FFF;
padding: 4x;
margin-bottom: 5px;
background-color: transparent;
}
.tbl2 {
font-family: Trebuchet MS;
font-size: 14px;
background-color: #FFF;
padding: 4x;
margin-bottom: 5px;
background-color: transparent;
}
.col-1-2 {
width: 25%;
border: 1px solid;
border-radius: 10px;
margin: 2px;
background-color: #007dc1;
padding-left: 6px;
font-family: Trebuchet MS;
border: 3px solid #005684;
}
.col-1-2-2 {
width: 66%;
border-radius: 10px;
background-color: #007dc1;
font-family: Trebuchet MS;
padding-left: 12px;
padding-bottom: 10px;
border: 3px solid #005684;
}
.myButton {
-moz-box-shadow: inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow: inset 0px 1px 0px 0px #54a3f7;
box-shadow: inset 0px 1px 0px 0px #54a3f7;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
background: -moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background: -webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background: -o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background: -ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7', GradientType=0);
background-color: #007dc1;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #124d77;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Trebuchet MS;
font-size: 21px;
font-weight: bold;
padding: 14px 44px;
text-decoration: none;
text-shadow: 0px 0px 0px #154682;
}
.myButton:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1', GradientType=0);
background-color: #0061a7;
}
.myButton:active {
position: relative;
top: 1px;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[class*='col-'] {
float: left;
padding-right: 20px;
/* column-space */
}
.grid {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.grid-pad {
padding-top: 20px;
padding-left: 20px;
/* grid-space to left */
padding-right: 0px;
/* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}
.push-right {
float: right;
}
/* Content Columns */
.col-1-1 {
width: 100%;
}
.col-2-3,
col-8-12 {
width: 66.66%;
}
.tarpas {
width: 1%;
}
.footer {
position: absolute;
bottom: 0;
height: 40px;
width: 900px;
text-align: center;
background-color: #007dc1;
border-radius: 10px;
margin-top: 10px;
font-family: Trebuchet MS;
}
.span {
text-align: center;
}
.tr3 {
background-color: #343838;
font-family: Trebuchet MS;
font-size: 12px;
text-align: center;
color: #008C9E;
font-weight: bold;
}
.tr4 {
background-color: #343838;
font-family: Trebuchet MS;
font-size: 13px;
text-align: center;
color: black;
}
.reklama {
height: 90px;
width: 210px;
border: 1.5px #000 solid;
border-radius: 10px;
vertical-align: middle;
}
.reklama1 {
vertical-align: central;
margin-top: 10px;
margin-left: 7px;
}
.linija {
background-color: black;
color: black;
height: 2px;
border: 0px none;
clear: both;
border-radius: 5px;
margin-left: 10px;
}
.tr5 {
background-color: #343838;
font-family: Trebuchet MS;
font-size: 13px;
text-align: center;
color: green;
}
.tr6 {
background-color: #343838;
font-family: Trebuchet MS;
font-size: 13px;
text-align: center;
color: red;
}
.tr7 {
background-color: #343838;
font-family: Trebuchet MS;
font-size: 13px;
text-align: center;
color: #009;
}
.tr8 {
background-color: #343838;
font-family: Trebuchet MS;
font-size: 13px;
text-align: center;
color: #FF6;
}
。如何修复它并将页脚保持在页面底部?该表是由PHP制作的,但我认为这不会影响它。我尝试用不同的位置“玩”,但它没有给我正确的结果。
<a href="pirkimas.php" title="Pirkti" class="myButton">Pirkti</a>
<div class='col-1-2'>
<h3 style='color: #FFF'>APIE MUS</h3>
<a style='font-size: 80%;'>Daugeliui tikriausiai idomu, kas mes tokie ir ką mes galime Jums pasiulyti. „BetLt.net“ komanda sudaryta iš dideles grupes žmoniu.</a>
<br>
<br>
<hr class="linija"></hr>
<br>
<a href="https://www.facebook.com/groups/304171889786369/">
<div class='reklama'>
<img align="center" src="images/reklama1.jpg" height="60px" width="190px" class='reklama1'>
</div>
</a>
<br>
<br>
</div>
<div class='col-1-2-2'>
<h3 style='color: #FFF'>PASKUTINES PROGNOZĖS</h3>
<?php include( "lentele.php"); ?>
</div>
<div class="footer" align="center">
<p align="center" style='text-align: center; vertical-align: middle;'>Visos teises saugomos @ 2014</p>
</div>
{{1}}
答案 0 :(得分:1)
让您的页脚类看起来像这样:
.footer {
position:relative;
float:left;
height : 40px;
width: 900px;
text-align: center;
background-color: #007dc1;
border-radius: 10px;
margin-top: 10px;
font-family: Trebuchet MS;
}
答案 1 :(得分:0)
由于您的页脚是绝对定位的,它将位于底部,并且会在内容上重叠...尝试这样可以正常工作
.col-1-2-2{
margin-bottom: 50px;
}
答案 2 :(得分:0)
您正在使用页脚的绝对位置,因此当容器页面高度小于内容页面高度时,页脚会与其他div重叠。不建议将div与相同级别的绝对位置和相对位置混合使用。尝试为de divs使用浮动位置。