1

嘿，我想把那个下面的 div 框放在那个上面有细节的盒子旁边，但是当我尝试定位绝对它时，我不知道为什么（我将所有三个 div 的父 div 设置为相对位置），我应该如何解决这个问题或任何其他更好的方法来做到这一点。

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

分区说明

   #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; 
    }
4

2 回答 2

1

您想要一个 div OVER 另一个 div 并且您说它不应该 OVERLAP 这是不可能的，而是减小上 div 的大小，使用float: left;这将使下面的 div 除了浮动 div 之外移动

也不要忘记清除浮动，否则您将花费​​另外 2 个小时来思考元素位置和背景颜色到底发生了什么

如果你想使用position: absolute;比 div 会重叠，所以在这种情况下，使用position: relative;容器元素而不是使用position: absolute;with top right bottom left properties to set your element correctly。

不要忘记position: relative;，否则您的绝对 div 将在您的页面中狂奔

于 2013-03-22T18:21:31.330 回答
1

我假设你想把那个较低的 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规则将帮助您保持布局并建立边距、填充和边框，而不会破坏它。

于 2013-03-22T18:35:21.710 回答