Question

嗨我的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中添加接下来的两个类，就可以使表转到以太端

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

每件事都改变了hr是在桌子上面而所有的页脚样式都不起作用

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

Answer 1

当你将float属性添加到一个元素时，它会从正常流中删除，所以它的父元素仍处于正常流程中，就好像浮动元素不再是它的子元素一样。“ p>

你可以这样解决：

.hr{ clear: both; }

希望它有所帮助。

Answer 2

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

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

.content {
  height: auto; overflow: hidden 
}

Answer 3

在class =“hr”div

之前添加下面的div

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

所以看起来应该是这样的

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

同时导致页脚再次低于表格。

CSS位置和浮动一切都在重叠

3 个答案: