Question

嘿我想把那个较低的div框放在那个上面的盒子旁边，但是当我尝试定位绝对时，我会忘记为什么（我把所有三个div的父div作为位置rlative），我怎么想的解决这个或任何其他更好的方法来做到这一点。

这是截图 - http://www.findportugal.com/Untitled.png

Div描述

   #user_panel - div around all the other divs ie parent div
   #user_details - div with details on top
   #user_photos - div with photo heading
   #user_current - div at the lower part

CSS：

    #user_panel 
    { 
      color: white; 
      position: relative; 
    }
    #user_details 
    { 
      padding: 0 0 30px 0; 
    }
    #user_details table 
    { 
      padding: 30px 20px 10px 30px; 
      border: 1px solid grey; 
      margin: 0 60px 0 40px
    }
    #user_details table tbody tr td#right 
    { 
      padding: 0 0 0 100px; 
    }
    #users_title 
    { 
      padding: 20px 0 0 50px; 
    }

    div#user_photos 
    { 
       width: 850px; 
       height: 230px; 
       border: 1px solid grey; 
       margin: 50px 0 0 40px;
       padding: 0 0 20px 20px;  
    }

   #user_current 
   {
      border: 1px solid grey; 
      width: 320px; 
      position: absolute; 
    }

Answer 1

你想要一个div OVER另一个div并且你说它不应该重写这是不可能的，而是减少上部div的大小，使用float: left;这将让下面的div移位除了浮动的div < / p>

另外不要忘记清除漂浮物，否则你将花费其他2个小时来思考元素位置和背景颜色到底是怎么回事

如果你想使用position: absolute;而不是div会重叠，那么在这种情况下，请使用position: relative;作为容器元素，而不要将position: absolute;与top right bottom left properties to set your element correctly一起使用。

别忘了position: relative;否则你的绝对div会在你的页面中疯狂

Answer 2

我假设你想把那个较低的div框放在左上方div框右边的空白处，而不是实际上与另一个框重叠？如果是这样，你最好使用花车。

你没有显示你的html，所以让我们假设左上方的框的id为“details”，底部框的id为“current-pic”，中间的全宽框为您的屏幕截图是“照片”的ID。构建布局的起点如下所示。

已编辑：抱歉，我在您使用HTML更新问题之前写了答案。代码将在下面重写，以显示原始html中的ID。

HTML可以是：

<div id="user_details"></div>
<div id="user_current"></div>
<div id="user_photos"></div>

CSS的基本布局如下：

#user_details {
   float: left;
   width: 50%;
   box-sizing: border-box;
   /* other styling stuff like padding, etc. */
}
#user_current {
   float: right;
   width: 50%;
   box-sizing: border-box;
   /* other styling stuff like padding, etc. */
}
#user_photos {
   clear: both;
}

这不会考虑框内的任何内容或框之间的间距，但box-sizing规则将帮助您维护布局并构建边距，填充和边框，而不会破坏它们它

CSS - 如何在不重叠的情况下将另一个div浮动到另一个div上

2 个答案: