CSS - 如何浮动另一个div在另一个不重叠

嘿，我想把那个较低的div框放在这个上面的框旁边的细节，但当我试图绝对地定位它时，我下降了原因（我做了父div所有三个divs作为相对位置），我该如何解决这个问题或者其他更好的方法来解决这个问题。CSS - 如何浮动另一个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; 
    }

来源

2013-03-22 Abhinav

你能不能给我们一些CSS和HTML一起工作呢？ – fredrik 2013-03-22 18:20:05

请阅读[常见问题]（http://stackoverflow.com/faq），学习如何询问关于做题......这是不正确的格式。您必须发布代码示例。要求我们访问网站是不可接受的。 – brbcoding 2013-03-22 18:20:09

'位置：absolute'将导致框不再影响其容器的自动高度，如果你给不X/Y坐标就会去到内容的底部，这样 – PlantTheIdea 2013-03-22 18:20:24

你想一个div比另一个股利和你说的话，应该不会重叠是不可能，而是减少上部分的大小，使用float: left;，这将让div下面的移动besi DES浮动DIV

也不要忘记清除浮动，或者你会花等2小时想什么到底是怎么回事与元素位置以及背景颜色

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

不要忘记position: relative;否则你绝对会的div在页面

来源

2013-03-22 18:21:31

@Abhinav如果它帮助你，你可以将这个答案标记为正确的:) – 2013-03-22 18:33:20

完成，你应得的:) – Abhinav 2013-03-22 18:40:39

@Abhinav谢谢:) – 2013-03-22 19:39:03

我假设你要放置较低DIV盒在空的空间左上方格框的右侧撒野，而不是实际上与另一个盒子重叠？如果是这样，你最好用漂浮物。

你还没有显示你的html，所以我们假设左上角的盒子有一个“细节”的ID，底部盒子的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-22 18:35:21 raphaelvalerio

CSS - 如何浮动另一个div在另一个不重叠

回答

相关问题