Question

我通过使用完整的div元素进行我的第一个布局，但是我遇到了一个问题。我有一个固定位置的div和自动高度（将根据内容扩展）但我似乎无法在它下面放置另一个div。下面的div如何根据上面div的高度自动定位？

这些div将包含在一个包装器div中，将它们放在屏幕的中心。

JSFIDDLE：http://jsfiddle.net/kfbjd/（请注意，第一个div的值为top值，因此底部div会覆盖它）修正了jsfiddle：http://jsfiddle.net/kfbjd/14/

<div id="main">
<div id="maintext">MAIN</div>

</div>

<div id="about">
<div id="maintext">ABOUT</div>

</div>

<style type="text/css">
#main{
    background-color:#000;
    width:900px;
    top:129px;
    position:fixed;
}

#about{
    background-color:#000;
    width:900px;
    position:relative;
}
</style>

感谢您的建议添加top：129px到#about修复它。但是有一个问题，虽然它在浏览器的jsfiddle上正确显示，但文本显示为包装：

enter image description here

Answer 1

编辑：在这里，使用你的jsfiddle：http://jsfiddle.net/kfbjd/7/

正如其他人评论的那样，固定或绝对位置会将其从页面流中移除，因此您将无法让其他div在其周围定位。如果你做了相对位置然后使用了css'display：block'样式，它可能会让你更接近你想要的。

http://www.w3schools.com/cssref/pr_class_display.asp

更新以包含来自JSFiddle的解决方案的全文，包括水平居中，为子孙后代：

<style>
#main{
    background-color:#000;
    width:900px;
    margin-top:149px;
    position:relative;
    margin-left: auto;
    margin-right: auto;    
    opacity:0.9;
    z-index:2;
    box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    -webkit-box-shadow: 0px 0px 20px #000;    
}

.maintext{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#6b6b6b;
    padding:25px;
    text-align:left;
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;    
}

#about{
    background-color:#000;
    width:900px;
    /*height:450px;    */
    margin-top:20px;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    opacity:0.9;
    z-index:2;
    box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    -webkit-box-shadow: 0px 0px 20px #000;    
}
</style>

<div id="main">
<div class="maintext">Welcome to my personal portfolio. Here you can find projects I have worked on, and hire me for freelance work. If you like my work and want to hire me for projects please check out my software skills <a href="about.html">here</a> and <a href="contact.html">contact</a> me to discuss about projects.Welcome to my personal portfolio.
<div style="text-align:center;"><br/><img src="images/green.png" border="0" style="vertical-align:middle; margin-bottom:3px;"/>Available for freelance work</div></div>

</div>

<div id="about">
<div class="maintext">ABOUT TEXT</div>

Answer 2

如果您在#main中移动#about，它将正确定位自己http://jsfiddle.net/kfbjd/3/

如果你不能这样做，你可以添加

top:129px;

到#about div（匹配你已经给#main的内容）。 http://jsfiddle.net/kfbjd/5/

Answer 3

如果你只想让'about'div位于固定位置'main'div的底部，你就知道“about”div的高度你可以这样做：

<style>
    #main{
    background-color:#000;
    width:900px;
    top:129px;
    position:fixed;
    padding:0px 0px 100px 0px;
}

#about{
    background-color:#ff0000;
    width:900px;
    position:absolute;
    bottom:0px;
height:100px;
}
</style>

<div id="main">
    <div id="maintext">MAIN</div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <div id="about">
    <div id="maintext">ABOUT</div>

    </div>

</div>

“main”底部的填充将允许“about”div的空间出现在底部（否则它将重叠“main”div底部的内容）。我只是将100像素作为“约”div的示例高度。

将div放在另一个div下面

3 个答案: