Влево, вправо и в центре выровнены divs

Question

Я пытаюсь создать страницу с несколькими 3 div в строке, которые выровнены по правому краю и по центру.

Я пробовал использовать float:left и float:right, но все получилось очень плохо. Страница масштабируется супер случайным образом, и я хочу, чтобы divs стали в 2 столбцах, когда страница масштабируется, а затем до 1 столбца для мобильных устройств.

.container { 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.left, 
 
.middle, 
 
.right { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
    display: inline-block; 
 
} 
 
.left { 
 
    float: left; 
 
} 
 
.right { 
 
    float: right; 
 
}

<div class="container"> 
 

 
    <div class="left"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="middle"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 

 
</div>

jsFiddle: https://jsfiddle.net/azizn/j4cgef5g/

Answer 1

Ознакомьтесь с примерами, которые я привел ниже (CSS и HTML скрипт)

HTML

<div id='columns'> 
    <div id='col1'></div> 
    <div id='col2'></div> 
    <div id='col3'></div> 
</div> 

CSS

#columns{ 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

#columns #col1{ 
    float: left; 
    width: 33.33%; 
    height: 100%; 
} 


#columns #col2{ 
    float: left; 
    width: 33.33%; 
    height: 100%; 
} 


#columns #col3{ 
    float: left; 
    width: 33.33%; 
    height: 100%; 
} 

@media media only screen and (max-width:1024px) and (min-width:540px){ 
    #columns #col1{ 
     width: 50%; 
    } 


    #columns #col2{ 
     width: 50%; 
    } 


    #columns #col3{ 
     width: 100%; 
    } 
} 

@media media only screen and (max-width:540px){ 
    #columns #col1{ 
     width: 100%; 
    } 


    #columns #col2{ 
     width: 100%; 
    } 


    #columns #col3{ 
     width: 100%; 
    } 
} 

Обратите внимание: я не тестировал приведенный выше пример, но он должен работать. Вы можете отредактировать свои значения ширины и высоты, как вы пожелаете, а также ширину для мультимедийных запросов. По мере того, как экран становится меньше, он удаляет столбцы 3 и 2 с дисплея, делая другие столбцы более крупными. Чтобы сделать три столбца в левой, центральной и правой положениях, вам не нужно указывать разные поплавки, так как они находятся в блоках, они автоматически сталкиваются и складываются слева, пока они не ударятся о край экрана. Именно поэтому ширина может составлять всего 33,33%, так как 33,333%, как правило, заставляют третий блок сбрасываться, так как недостаточно места. В большинстве случаев 0,01% мертвого пространства в любом случае не заметны.

Answer 2

Это использование хрестоматийный пример для Flexbox:

.container{ 
    display: flex; 
    justify-content: space-between; 
} 

Вот пример: http://codepen.io/memoblue/pen/XKQqGg

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