Автоматического расположения элементов блока

Question

У меня есть макет похож на следующий:

#first { 
 
    height: 100px; 
 
    float: left; 
 
} 
 
#second { 
 
    height: 200px; 
 
    float: left; 
 
} 
 
#third { 
 
    height: 100px; 
 
    float: left; 
 
} 
 
.column { 
 
    background: red; 
 
    width: 200px; 
 
    margin: 5px 
 
}

<div id="parrent"> 
 
    <div id="first" class="column"> 
 
    FIRST 
 
    </div> 
 
    <div id="second" class="column"> 
 
    SECOND 
 
    </div> 
 
    <div id="third" class="column"> 
 
    THIRD 
 
    </div> 
 
</div>

Когда у нас есть достаточно мест, это выглядит следующим образом: Это нормально.

Когда у нас нет достаточно мест, он выглядит следующим образом:

И это не в порядке. Я не хочу, это пустое пространство между блоком 1 и 3.

Я хочу, чтобы достичь чего-то вроде этого:

Как я могу это сделать?

Answer 1

Это не возможно с только кода - вам нужно specifiy по крайней мере, один mediaquery для этого:

@media (max-width: 480px) { 
    #second { 
     float: right; 
    } 
} 

Вы должны указать максимальную ширину в mediaquery в соответствии с вашими потребностями.

Answer 2

Используя только CSS, невозможно выровнять divs для пустого пространства.

Если вы не хотите оставлять пустое место, вам следует пойти на макет, в котором используется jQuery.

Вы можете прочитать об этом по адресу:

http://masonry.desandro.com/layout.html

Я думаю, что это то, что вы ищете.

Но, если вы хотите выровнять элементы в вертикальных столбцах, вы можете использовать Flexbox: (Возможно, это не тот ответ, который вы ищете, но я все же хотел поделиться тем, что существует возможность выравнивания столбцов по вертикали, используя Flexbox)

DEMO:

http://plnkr.co/edit/zjuveUTson3C6u45nVSH?p=preview

HTML:

<ul> 
    <li>a</li> 
    <li>b</li> 
    <li>c</li> 
    <li>d</li> 
    <li>e</li> 
    <li>f</li> 
</ul> 

CSS:

ul { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    height: 306px; 
    width: 200px; 
} 
li { 
    width: 100px; 
    height: 100px; 
    background:red; 
    color: white; 
    text-align: center; 
    font-size: 50px; 
    line-height: 100px; 
    font-weight: bold; 
    border: 1px solid white; 
    list-style: none; 
} 

DEMO:

http://plnkr.co/edit/zjuveUTson3C6u45nVSH?p=preview

Answer 3

Изменения в вашем втором стиле может это помочь вам

#first { 
 
    height: 100px; 
 
    float: left; 
 
} 
 
    
 
#second { 
 
float: right; 
 
height: 200px; 
 
margin-right: 190px; 
 
} 
 
#third { 
 
    height: 100px; 
 
    float: left; 
 
} 
 
.column { 
 
    background: red; 
 
    width: 200px; 
 
    margin: 5px 
 
}

<div id="parrent"> 
 
    <div id="first" class="column"> 
 
    FIRST 
 
    </div> 
 
    <div id="second" class="column"> 
 
    SECOND 
 
    </div> 
 
    <div id="third" class="column"> 
 
    THIRD 
 
    </div> 
 
</div>