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 に次の 2 つのクラスを追加して、テーブルをイーサ側に移動させるとすぐに

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

すべてが変更され、時間はテーブルの上にあり、すべてのフッタースタイルが機能しません

これを修正する方法はありますか？

4

3 に答える 3

1

プロパティを要素に追加するとfloat、通常のフローから削除されるため、通常のフローに残っている親は、フロートされた要素が子ではなくなったかのように動作します。

あなたはこのように解決することができます：

.hr{ clear: both; }

それが役に立てば幸い。

于 2012-05-07T15:48:31.047 に答える
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 に答える
0

これは、 の両方の子要素.contentがフローティングであるため、このコンテナーの高さは、最初の 2 つの<p>(非フローティング) 要素のみを含むように動作します (hr要素が最後の段落のすぐ下にあることがわかります)。

正しい高さを復元するには、 easyclearingのようなある種の非構造的なクリアリングを親に適用するだけです。または単に追加する

.content {
  height: auto; overflow: hidden 
}
于 2012-05-07T15:44:45.243 に答える