0

コンテナ : 相対的な配置。コンテナーの幅が 60% と 30% の2 つの子 divを左右に配置します。

左の子: 絶対配置。上:0; 左:0; 幅: 60%; 右の子: 絶対配置。上:0; 右：0; 幅: 30%;

フッター: 相対位置。

しかし、フッターが出てきます。以下に示すコード。次のコード LIVE に アクセスしてください。次のコードの問題点を教えてください。技術的にはすべて正しいと思います。

<style type="text/css">
    #container {
    position: relative;
    margin:0 auto;
    width: 1000px;
    background: #C63;
    padding: 10px;
    height:auto;
}

#leftCol {
    position: absolute;
    top:10px;
    left:10px;
    background: #e8f6fe;
    width: 60%;
}

#rightCol {
    position: absolute;
    top:10px;
    right:10px;
    width:30%;
    background: #aafed6;
    }

.box {
    position:relative;
    clear:both;
    background:#F39;
     }

</style>

  <div id="container">

  <div id="leftCol">
       <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
       <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
       <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
       <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
   </div>

<div id="rightCol"> 
          <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
          <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

    </div>

 </div>

 <div class="box">
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
 </div>
4

3 に答える 3

0

#container divの高さについて言及する必要があります。このような

#container {
  background: none repeat scroll 0 0 #CC6633;
  height: 240px; // mention height
  margin: 0 auto;
  padding: 10px;
  position: relative;
  width: 1000px;
}
于 2013-09-28T16:55:53.900 に答える