1

嗨，由于某种原因，我的 css 有问题我无法在另一个 div 下获得 div 所以这是我的代码

现场演示 adamlisik.co.uk/kantor2 这是我的 CSS

body{
margin: 0;
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 18px;
padding:0px;
background-image:url('../images/bg-body.jpg');
background-attachment:fixed;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: inherit;
  font-weight: bold;
  color: inherit;
  }
h1 {
  font-size: 30px;
  line-height: 36px;
}
h2 {
  font-size: 24px;
  line-height: 36px;
}
h3 {
  line-height: 27px;
  font-size: 18px;
}
h4,
    h5,
h6 {
  line-height: 18px;
}
h4 {
  font-size: 14px;
}
h5 {
  font-size: 12px;
}
h6 {
  font-size: 11px;
  color: #999999;
  text-transform: uppercase;
}
p {
  margin: 0 0 9px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
    color:#0d0d0d;
}
hr{ border:none; height:1px; margin:30px 0; background-color:#CCCCCC; color:#CCCCCC; }
    .hr{ border-top:1px solid #CCCCCC; margin:30px 0; }
.container {
width:1000px;
margin: auto;
padding:0px;
background:#FFF;
}
.header { 
position:relative; 
z-index:10; 
background-image:url('../images/logo1.jpg');
background-repeat:no-repeat;
background-position:left bottom; 
height:100px;
width:950px;
margin:auto;

}

ul#dropdown-menu{  float:right; list-style:none; margin-bottom:0px; padding-top:70px; }       
ul#dropdown-menu li{ float: left; }
ul#dropdown-menu li a{ display: block; padding:7px 21px 5px 0; font-size:16px; text-transform:none; color:#252525;text-decoration:none; font-weight:bold; }            
ul#dropdown-menu li a:hover{ color:#FF0000;}
ul#dropdown-menu li.hover a{ text-decoration:underline;  }           
ul#dropdown-menu li.current > a{ color: #FF0000; }                             
ul#dropdown-menu li .sub-menu li a{ color:#252525; }                               
ul#dropdown-menu li.last > a{ padding-right:0px; }

.money {
    margin-top:20px;
    background-image:url('../images/hr-bg.jpg');
    height:120px
}

.content {
padding:25px 50px 10px;
}

.footer {
padding:5px 15px 10px;
}

现在，只要您在 css 中添加下两个类以使表转到 ether 端

 .left {
float:left;
}
.right {
float:right;}

每件事都会改变 hr 在表格上方，并且所有页脚样式都不起作用

知道如何解决这个问题吗？

4

3 回答 3

1

当您将float属性添加到元素时，它会从正常流中删除，因此仍处于正常流中的父元素的行为就像浮动元素不再是它的子元素一样。

你可以这样解决：

.hr{ clear: both; }

希望能帮助到你。

于 2012-05-07T15:48:31.047 回答
0

发生这种情况是因为 的两个子元素.content都是浮动的，因此该容器的高度表现为它仅包含前两个<p>（非浮动）元素（如您所见，该hr元素位于最后一段的下方）。

要恢复正确的高度，只需对父级应用某种非结构清除，例如easyclearing。或者只是添加

.content {
  height: auto; overflow: hidden 
}
于 2012-05-07T15:44:45.243 回答
0

在 class="hr" div 之前添加下面的 div

<div style="clear:both;"></div>

所以它应该看起来像这样

</div>
<div style="clear:both;"></div>
<div class="hr"></div>
<div class="footer">

这同时导致页脚再次位于表格下方。

于 2012-05-07T15:48:19.890 回答