为什么一个div正在移动另一个?

时间:2014-12-03 07:09:20

标签: html css web

如下所示,一个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}}

3 个答案:

答案 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;
}

结果:http://jsfiddle.net/ub7rxnaa/

答案 1 :(得分:0)

由于您的页脚是绝对定位的,它将位于底部,并且会在内容上重叠...尝试这样可以正常工作

.col-1-2-2{
    margin-bottom: 50px;
  }

答案 2 :(得分:0)

您正在使用页脚的绝对位置,因此当容器页面高度小于内容页面高度时,页脚会与其他div重叠。不建议将div与相同级别的绝对位置和相对位置混合使用。尝试为de divs使用浮动位置。