0

容器：相对定位。有两个子 div左右列，具有 60% 和 30% 的容器宽度。

左孩子：绝对定位。顶部：0；左：0；宽度：60%； 右孩子：绝对定位。顶部：0；对：0；宽度：30%；

页脚：相对定位。

但是页脚出现了。代码如下。访问下面的代码 LIVE here 谁能告诉我下面的代码有什么问题，我认为在技术上都是正确的。

<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

您应该从内部的标签中保留position: absolute规则。并且还应该在左右标签中添加规则：<div><div id="container">display: inline-block;<div>

<style type="text/css">
    #container {
    position: relative;
    margin:0 auto;
    width: 1000px;
    background: #C63;
    padding: 10px;
    height:auto;
    }
    #leftCol {
    display: inline-block;
    top:10px;
    left:10px;
    background: #e8f6fe;
    width: 60%;

    }
    #rightCol {
    display: inline-block;
    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>
于 2013-09-28T17:04:45.950 回答
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 回答
0

将边距 0 自动更改为margin: 0 auto 228px;

演示：http: //jsfiddle.net/KwB5r/

#container {
    position: relative;
    /*margin:0 auto;*/
    margin: 0 auto 228px;
    width: 1000px;
    background: #C63;
    padding: 10px;
    height:auto;
}

或将heigth您的容器设置228px为例如 在此处输入图像描述

于 2013-09-28T16:59:39.517 回答