Как перекомпоновать DIV-блоки в CSS, чтобы придерживаться правого нижнего угла?

Question

Допустим, у меня есть DIV, стилизованный под квадрат, и внутри него есть квадраты (DIV).Я бы хотел, чтобы квадраты внутри основного DIV складывались в правом нижнем углу.Я могу использовать float: right чтобы получить их по правому краю, но как мне сделать так, чтобы они складывались снизу, а не сверху?

Answer 1

Вот версия чистого CSS: http://jsfiddle.net/zkhWA/1/

В основном поместите свои маленькие квадраты в другой абсолютно позиционированный элемент, который заземлен в правом нижнем углу большого квадрата, используя:

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

Тогда заставьте все маленькие квадраты плавать вправо:

float: right;

Не забудьте применить положение: относительно большого квадрата.

Answer 2

Если вы не можете найти хорошее решение CSS, jQuery легко справится с этим: Fiddle

$('.inner').each(function(i) {
    $this = $(this);
    var bottomPos = ($this.outerHeight())*i;
    $this.css('bottom', bottomPos);
});

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>

Answer 3

Вы можете использовать display:table-cell с vertical-align:bottom

Вот хороший учебник по использованию макета "table-cell":

http://www.digital -web.com / статьи / everything_you_know_about_CSS_Is_wrong /

Answer 4

В зависимости от того, что вы подразумеваете под «стопкой внизу», вы можете достичь этого с помощью внутреннего контейнера 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>

Что это будет делать, это обтекание этих квадратов справа налево внижняя часть основного дел.Тем не менее, эти дочерние квадраты все равно будут течь сверху вниз внутри контейнера div.Если вы хотите, чтобы они проходили по вертикали в обратном направлении (снизу вверх), я не уверен, что это было бы возможно без какого-либо сложного макета JavaScript.

Очевидно, что точный стиль "right_floated_square" был удален для краткости.

Answer 5

Чтобы ребенок придерживался самого дна контейнера, установите position:relative и bottom:0px. Однако это не будет складывать их, вам нужно установить нижнее значение на другое значение, чтобы дочерний элемент был выше другого дочернего элемента. Вы можете использовать javascript или jquery для их динамического подгонки, если размеры изменяются следующим образом:

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

Примечание: 5 только для заполнения