Question

尝试在div的底部开始跨距，现在我找到了答案。不按照我想要的方式工作，我不希望它们彼此分层。

#wrap {   
    height: 200px;
    position: relative;
} 
.msg { 
  bottom: 0;
  position: absolute;
}
        <div id="theWwrap">
            <div id="wrap">
                <span class="msg"><b>Nickname: </b>Text</span><br>
                <span class="msg"><b>Nickname: </b>Text</span><br>
             </div>
            <form id="theInput">
                <input size="35" id="message">
                <input type="submit">
            </form>
        </div>

Answer 1

你可以重新安排你的html #wrap，也可以在表格中包装。然后给#theWwrap relative位置，第二个位置absolute位置而不是单个类：JS Fiddle

HTML

<div id="theWwrap">
    <div id="wrap"> <span class="msg"><b>Nickname: </b>Text</span>

        <br> <span class="msg"><b>Nickname: </b>Text</span>

        <br>
        <form id="theInput">
            <input size="35" id="message">
            <input type="submit">
        </form>
    </div>
</div>

CSS

#theWwrap {
    height: 200px;
    position: relative;
}
#wrap {
    bottom: 0;
    position: absolute;
}

<强>解释

absolute获取与其直接相关的位置 - 非static父级。因此，如果两个兄弟姐妹定位absolute，并且分配了相同的位置（顶部，左侧，底部，右侧），它们将落在同一区域。

<强>来源：

CSS position property

让课程从div问题开始

1 个答案: