0

これは私の問題です。左のフロートと右のフロートがコンテナに入れられず、フッターは中央のコンテンツ部分にのみ注意を払います。私は何を間違っていますか？写真でお見せできますが、担当者が10人いないので追加できません。clear:both などについて読みましたが、残念ながらすべてが機能しません。

#container
{
    position: relative;
    width: 58.5%;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #336600;
    text-align: left;

    }
#header
{
    height: 160px;
    background-image:url(images/bannerboven.jpg);
}
#sideleft
{
    position: absolute;
    top: 160px;
    left: 0;
    float: left;
    width: 22%;
    background: #CCFFFF;
    padding: 15px 10px 15px 20px;
}

#sideright
{
    position: absolute;
    top: 160px;
    right: 0;
    float:right;
    width: 23%;
    background: #CCFFFF;
    font-size: 0.8em;
    padding: 15px 10px 15px 20px;
}
#mainContent
{
    margin: 0 26% 0 26%;
    padding: 0 10px;
    background:  #0F0;
    }
#footer
{
    padding: 0 10px 0 20px;
    background: #DDDDDD;
    text-align: center;
    font-weight: bold;
    }
4

2 に答える 2

1

html構造を知らずに何を達成しようとしているのかはわかりませんが、問題は、左右のコンテナーに絶対的な位置があり、浮き上がった位置にあるという事実に起因しています。

html要素のデフォルトの位置は静的であるため、すべてをフロートさせるか、すべてを絶対位置にします。ポジショニングをよりよく理解するのに役立つものがあります。これは非常に簡単で、5分で完了します：http ：//www.barelyfitz.com/screencast/html-training/css/positioning/

また、 htmlが含まれているjsfiddleリンクを投稿する必要があります。これにより、さらにサポートが必要な場合に、達成しようとしていることをよりよく理解できます。私の推測では、ロヒト・アザドの解決策は正しいと思います。ポジショニングを理解するのに苦労しているだけです。

于 2012-08-16T11:37:16.180 に答える
0

こんにちは、あなたのコードを確認します。これが必要だと思います

HTML

<div id="container">
  <div id="header">Header</div>

  <div id="mainContent">
    <div id="sideleft">Left</div>
    <div id="sideright">Right</div>
  </div>

  <div id="footer">Footer</div>

</div>

CSS

#container
{

    width: 58.5%;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #336600;

    }
#header
{
    height: 160px;
  background:red;
    background-image:url(images/bannerboven.jpg);
}
#sideleft
{
float:left;    width: 22%;
    background: #CCFFFF;
    padding: 15px 10px 15px 20px;
}

#sideright
{
float:right;
  width: 23%;
    background: #CCFFFF;
    font-size: 0.8em;
    padding: 15px 10px 15px 20px;
}
#mainContent
{
    padding: 20px 10px;
    background: green;
overflow:hidden;
    }
#footer
{
    padding: 0 10px 0 20px;
    background: #DDDDDD;
    text-align: center;
    font-weight: bold;
    }

ライブデモ

于 2012-08-16T11:09:54.273 に答える