Размещение divs на той же линии

Question

Хорошо, поэтому я пытаюсь настроить 5 разделов, чтобы выйти в форме «W». проверьте мой взгляд, чтобы получить ссылку на то, что я имею в виду здесь: http://joshadik307.github.io. Сейчас я использую таблицу, но это не эффективно, потому что она не делает именно то, что я хочу, и вызовет проблемы, когда я попытаюсь переформатировать все, чтобы работать на разных размерах экрана.

В любом случае, на моем сайте есть 5 divs в форме W прямо под заголовком. Я хочу иметь их так, чтобы они всегда показывали идеальный W (IE каждый из divs всегда равномерно распределялся между двумя выше или ниже него), и поэтому W растягивается по мере увеличения размера экрана.

Answer 1

Инлайн блок - непонятый и недооцененный тип дисплея:

<div class="w-wrapper"> 
<div class="callout">1</div> 
<div class="callout">3</div> 
<div class="callout">5</div> 
<div class="callout">2</div> 
<div class="callout">4</div> 
</div> 

CSS

.w-wrapper { 
    text-align: center; 
} 

.callout { 
    display: inline-block; 
    vertical-align: top; 
    width: 20%; 
    margin: 2em 5%; 
    border: 1px solid black; 
} 

http://jsfiddle.net/ryanwheale/jq6eyud2/

Answer 2

1- создать четыре равные по ширине погружения

2- флоат их влево

3- Создание размера дивы равных в каждом DIV с необходимыми полями

, например, в первой верхней предельной DIV будет 0, а во втором DIV запас сверху будет максимальным и так далее ....