CSS - Поместите новые DIVs поверх старых DIVs

Я пытаюсь использовать «vertical-align: bottom;» чтобы DIVs проходили со дна обертки/родительского DIV до вершины. Единственная проблема заключается в том, что я бы хотел, чтобы первые DIVs отображались внизу, а не вверху, как обычно, по умолчанию. Это происходит только потому, что я всегда хочу, чтобы нижняя строка была заполнена, если первые были введены в самом низу.CSS - Поместите новые DIVs поверх старых DIVs

Порядок DIVs на самом деле не является существенным, но я действительно хочу, чтобы нижняя «строка» была полностью заполнена верхней строкой, единственной, которая иногда имеет только 1 или 2 коробки сверху. Добавив новые ящики сверху, а не снизу, это приведет к описанию, которое я описал. Я надеюсь, что в этом есть смысл.

Также код, который я добавил ниже, показывает промежутки между каждой колонкой, которую я пытаюсь удалить. Не имеет значения, должен ли я изменить весь код, чтобы исправить первую проблему, но если кто-нибудь знает, почему это так, и дайте мне знать, это было бы здорово :)

Спасибо!

Вот то, что я до сих пор:

div.wrapper { 
 
\t display: table-cell; 
 
\t vertical-align: bottom; 
 
\t height: 500px; 
 
\t width: 640px; 
 
\t background-color: lightgrey; 
 
} 
 
div.wrapper div { 
 
\t width: 200px; 
 
\t height: 50px; 
 
\t display: inline-block; 
 
} 
 
div.wrapper div p { 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
} \t \t

<div class="wrapper"> 
 
\t <div style="background-color: #7E7ECC;"> 
 
\t \t <p>1</p> 
 
\t </div> 
 
\t <div style="background-color: #FFA347;"> 
 
\t \t <p>2</p> 
 
\t </div> 
 
\t <div style="background-color: #80E680;"> 
 
\t \t <p>3</p> 
 
\t </div> 
 
\t <div style="background-color: #FF99C2;"> 
 
\t \t <p>4</p> 
 
\t </div> 
 
\t <div style="background-color: #A6DBEE;"> 
 
\t \t <p>5</p> 
 
\t </div> 
 
</div>

И это то, что я хочу создать:

Это будет также приемлемо:

источник

2015-09-16 Mayron

вы не можете изменить порядок вручную или вы не можете изменить HTML? – Chris

Это действительно не проблема с заказом, я просто хочу, чтобы нижняя «строка» была полностью заполнена, а для верхней строки было меньше, чем эффект, который вы получаете, когда новые размещаются сверху, если это имеет смысл. – Mayron

В противном случае, когда Я стилизую его в будущем, дизайн будет выглядеть очень странным. – Mayron

Вы можете сделать это с помощью CSS3 flexbox layout. flex-wrap: wrap-reverse является ключевым свойством здесь, поскольку это позволяет элементы, чтобы обернуть в противоположном направлении flex-direction: row

align-content: flex-start используется вместо *-end, так как порядок компресс был отменен.

div.wrapper { 
 
    /* Added Properties */ 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap-reverse; 
 
    align-content: flex-start; 
 
    /*^Added Properties */ 
 
    background-color: lightgrey; 
 
    height: 150px; 
 
    vertical-align: bottom; 
 
    width: 640px; 
 
} 
 
div.wrapper div { 
 
    width: 200px; 
 
    height: 50px; 
 
    display: inline-block; 
 
} 
 
div.wrapper div p { 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<div class="wrapper"> 
 
    <div style="background-color: #7E7ECC;"> 
 
    <p>1</p> 
 
    </div> 
 
    <div style="background-color: #FFA347;"> 
 
    <p>2</p> 
 
    </div> 
 
    <div style="background-color: #80E680;"> 
 
    <p>3</p> 
 
    </div> 
 
    <div style="background-color: #FF99C2;"> 
 
    <p>4</p> 
 
    </div> 
 
    <div style="background-color: #A6DBEE;"> 
 
    <p>5</p> 
 
    </div> 
 
</div>

источник

2015-09-16 15:22:00

wow благодарит! Я никогда не видел эти свойства раньше, и даже исправил проблему с пробелом. Обычно я ненавижу работать с табличной ячейкой, так что это действительно радует. Еще раз спасибо: D – Mayron

Haha :) Добро пожаловать! Удостоверьтесь, что вы проверяете гибкость системы: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ и поддержку браузера: http://caniuse.com/#search=flexbox –

Я глядя в это прямо сейчас! Это заставило меня понять, насколько я не знаю о CSS3 <3 – Mayron

Вы можете решить эту проблему, добавив гибкий макет в обертку и отображения элементов в строке, которую вы хотите отменить его, чтобы получить эффект штабелирования. Смотрите CSS ниже:

div.wrapper { 
    display: table-cell; 
    vertical-align: bottom; 
    height: 500px; 
    width: 640px; 
    background-color: lightgrey; 
    display: flex; /* added */ 
    flex-direction: row; /* added */ 
    flex-wrap: wrap-reverse; /* added */ 
    align-content: flex-start; /* added */ 
} 
div.wrapper div { 
    width: 200px; 
    height: 50px; 
    display: inline-block; 
} 

div.wrapper div p { 
    margin: 0px; 
    padding: 0px; 
}

Вот это FIDDLE

источник

2015-09-16 15:25:50 Chris

CSS - Поместите новые DIVs поверх старых DIVs

ответ

Смежные вопросы