0

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

这些 div 将包含在将它们放置在屏幕中心的包装 div 中。

JSFIDDLE： http: //jsfiddle.net/kfbjd/（请注意，第一个 div 有一个顶部值，所以底部 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 上正确显示，但文本显示为包裹：

在此处输入图像描述

4

3 回答 3

2

编辑：在这里，使用你的 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>
​
于 2012-11-19T20:10:26.853 回答
1

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

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

top:129px;

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

于 2012-11-19T20:24:21.547 回答
0

如果您只想让“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 底部的内容重叠）。我只是将 100pixels 作为“about”div 的示例高度。

于 2012-11-19T20:43:18.460 回答