Question

我在3个主要div中有以下分割并排。最左边的div我希望它占据屏幕的60％，其余2（描述和资源）占据每个20％。当我运行这个时，所有3个都在左侧部分重叠。以下是我的代码。

<div id="left" style="position:absolute;top:0px;left:0px;width:60%;height:100%;background:#e6e6e6;">
   <div id="map" style="position:absolute;top:0px;left:0px;width:60%;height:400px">Map goes here.</div>
   <div id="details" style="position:absolute;top:400px;left:0px;width:60%;height:400px">Details</div>  
  </div>
   <div id="description" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">


   </div>
   <div id="resource" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">

   </div>

Answer 1

它们是重叠的，因为你已经给它们所有绝对位置并且向左0.绝对位置从页面的正常流中移除元素，并使用top / left / right / bottom属性将其准确地放在您指定的位置。只要它们具有相同的父级和相同的位置属性，它们就会重叠。

Answer 2

绝对位置，左边为0使它们重叠。

请使用css

请参阅解决方案：http://jsfiddle.net/thecbuilder/vZ77e/

<强> HTML

<div id="left">
    <div id="map">Map goes here.</div>
    <div id="details">Details</div>
</div>
<div id="description">description</div>
<div id="resource">resource</div>

<强> CSS

#left, #description, #resource{
    display:inline;
    float:left;
    height:100%;
}

#left{
    width:60%;
    background:#e6e6e6;
}

#description, #resource{
    width:20%;
}

Answer 3

它们是重叠的，因为你使用的是绝对位置。而是将div放在html页面的顶部，然后执行此操作：

<div id="left" style="float:left;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="float:left;width:60%;height:400px">Map goes here.</div>
<div id="details" style="float:left;left:0px;width:60%;height:400px">Details</div>  
</div>
<div id="description" style="float:left;width:20%;height:100%;background:#ffffff;">


 </div>
<div id="resource" style="float:left;width:20%;height:100%;background:#ffffff;">

 </div>

这会将div放在彼此旁边

3个主要div并排2个不同的百分比

3 个答案: