如何将CSS中的DIV框回流到右下角？

假设我有一个被设计成正方形的DIV，它里面有正方形（DIV）。我希望主DIV中的方块堆叠在右下角。我可以使用

float:right

将它们放在右边缘，但是如何使它们堆叠在底部而不是顶部？

要让子容器粘在容器的最底部，请设置

位置：relative

和

bottom:0px

。但是，这不会堆叠它们，您必须将底部设置为另一个值，以便一个子项位于另一个子项之上。如果大小是可变的，则可以使用javascript或jquery动态调整大小：

$('#second_element').css('bottom', $('#bottom_element').height() + 5);

---

注意：

5

仅用于填充

您可以将

显示：表格单元格

与

垂直对齐：底部

下面是一个关于使用“表格单元”布局的好教程：

---

根据“底部堆叠”的含义，您可以使用底部对齐的内部容器div来实现这一点。然后这些子方块可以在这个容器div的内部浮动，使它们粘在主div的底部，如下所示：

<div id="main_div" style="position: relative; height: 500px; width: 500px;">
   <div id="container_div" style="position: absolute; bottom: 0; right: 0;">
       <div class="right_floated_square">Square 1 Content</div>
       <div class="right_floated_square">Square 2 Content</div>
       <div class="right_floated_square">Square 3 Content</div>
   </div>
</div>

第1方内容
正方形2内容
第三方内容

这将在主分区的底部从右到左流动这些方块。但是，这些子方块仍然会在容器分区内从上到下流动。如果您希望它们垂直反向流动（自下而上），我不确定如果没有一些复杂的布局javascript，这是否可能

---

很明显，为了简洁起见，“right\u floated\u square”的确切样式已被删除。

如果您没有找到一个好的CSS解决方案，jQuery可以轻松处理以下问题：

HTML和CSS

<style type="text/css">
    #outer {
        width: 400px;
        height: 600px;
        background-color: #eee;
        position: relative;
    }
    .inner {
        width: 100px;
        height: 100px;
        background-color: #ccc;
        border: 1px solid #aaa;
        position: absolute;
        right: 0;
    }
</style>

<div id="outer">
    <div class="inner">One</div>
    <div class="inner">Two</div>
    <div class="inner">Three</div>
    <div class="inner">Four</div>
</div>

#外{
宽度：400px；
高度：600px；
背景色：#eee；
位置：相对位置；
}
.内部{
宽度：100px；
高度：100px；
背景色：#ccc；
边框：1px实心#aaa；
位置：绝对位置；
右：0；
}
一个
两个
三
四

这是一个纯css版本：

基本上，使用以下方法将小正方形放置在另一个绝对定位的元素中，该元素固定在大正方形的右下角：

position: absolute;
right: 0px;
bottom: 0px;

然后使所有小正方形向右浮动：

float: right;

---

不要忘记应用位置：相对于大正方形。

尝试在顶部正方形上使用边距顶部。这应该会把他们都打倒。我真的不知道有什么方法可以在不设置精确边距的情况下自动完成。margin-top需要一个特定的#值。我不想这样做，我只想说“在底部对齐并向上堆叠”。我知道的唯一方法是使用表，然后在td中使用attribute valign=“bottom”在此处查看我的答案：。我假设您的问题与该问题重复，对吗？您的JavaScript可以稍微改进为

$（'.inner'）.css（'bottom'，function（I）{return$（this.outerHeight（）*I；}）。
float: right;