我怎样才能发送一个内部的<到其母公司<div>?

小开

使外部div position="relative"和内部div position="absolute"并将其设置为bottom="0"。

小开

<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
<div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
</div>
</div>

小开

最佳答案

这是一种方法

<div style="position: relative;
width: 200px;
height: 150px;
border: 1px solid black;">


<div style="position: absolute;
bottom: 0;
width: 100%;
height: 50px;
border: 1px solid red;">
</div>
</div>

但是因为内部div的位置是绝对的，你总是要担心外部div的其他内容会重叠它(而且你总是要设置固定的高度)。

如果可以的话，最好将内部div作为外部div的最后一个DOM对象，并将其设置为“clear: both”。

小开

你可能不想要绝对定位，因为它破坏了回流:在某些情况下，更好的解决方案是使祖父元素display:table;和父元素display:table-cell;vertical-align:bottom;。这样做之后，你应该能够给子元素display:inline-block;，它们将自动神奇地流向父元素的底部。

小开

注意:这绝不是最好的方法!

< p > 情况: 我不得不做同样的事情，只是我不能添加任何额外的divs，因此我被困在我所拥有的，而不是删除innerHTML，并通过javascript创建另一个几乎像2渲染我需要在底部(动画栏)的内容

<强>解决方案: 考虑到我当时有多累，甚至想这样一个方法似乎很正常，但是我知道我有一个父DOM元素，酒吧的高度是从

而不是打乱javascript进一步我使用(并不总是好主意) CSS答案!：）

-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);

是的，这是正确的，而不是定位DOM，我把它的父母颠倒在css。

对于我的场景，它将工作!可能其他人也一样!没有火焰!：）

小开

如果你知道父母的身高，下面是避免绝对divs和table的方法:

<div class="parent">
<div class="child"> <a href="#">Home</a>
</div>
</div>

CSS:

.parent {
line-height:80px;
border: 1px solid black;
}
.child {
line-height:normal;
display: inline-block;
vertical-align:bottom;
border: 1px solid red;
}

JsFiddle:

使用实例

小开

灵活的方式。

.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}


/*  not necessary, just to visualize it */
.parent {
height: 500px;
border: 1px solid black;
}


.parent div {
border: 1px solid red;
}

<div class="parent">
<div>Images, text, buttons oh my!</div>
<div>Bottom</div>
</div>

编辑:

来源- Flexbox指南

浏览器支持flexbox - Caniuse

小开

这是另一个纯CSS技巧，它不影响元素流。

#parent {
min-height: 100vh; /* set height as you need */
display: flex;
flex-direction: column;
background: grey;
}
.child {
margin-top: auto;
background: green;
}

<div id="parent">
<h1>Positioning with margin</h1>
<div class="child">
Content to the bottom
</div>
</div>