горизонтальное выравнивание 3 дивы на одной и той же линии

Question

Я пытаюсь получить 3 дивы появляться на той же строке в образовании: слева - по центру - прямо

Например, один DIV по левому краю, следующий один центрированный, а последний выравнивается по правому краю.

Кто-нибудь знает, как это сделать? У меня есть 2 div слева и справа, но если я представляю центрированный div в середине, он перемещает правый div на новую строку.

Answer 1

.left-col { 
    float: left; 
    width:25%; 
} 
.center-col { 
    float: left; 
    width: 50%; 
} 
.right-col { 
    float: left; 
    width: 25%; 
} 

<div class="left-col">purple</div> 
<div class="center-col">monkey</div> 
<div class="right-col">dishwasher</div> 

Answer 2

Один простой способ сделать это с помощью любого фреймворка. Например: 960gs ->http://960.gs/.

С помощью этой структуры вы можете установить столбцы на своей странице. Пример: http://960.gs/demo.html

Answer 3

Итак, вы хотите создать таблицу с div? :)

нормально это должно быть что-то вроде:

<div style="float:left; width:20%;"></div> 
<div style="float:left; width:20%;"></div> 
<div style="float:left; width:20%;"></div> 

это должно быть правило CSS, хотя и вы, вероятно, хотите, чтобы изменить ширину каждого DIV

Answer 4

вы можете использование: дисплей: flex;

Инструмент, чтобы помочь вам произвести код и undertand, как это работает: http://the-echoplex.net/flexyboxes/

пример в вашем случае это может быть:

.flex-container { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    -webkit-flex-wrap: nowrap; 
    -ms-flex-wrap: nowrap; 
    flex-wrap: nowrap; 
    -webkit-box-pack: justify; 
    -moz-box-pack: justify; 
    -webkit-justify-content: space-between; 
    -ms-flex-pack: justify; 
    justify-content: space-between; 
    -webkit-align-content: stretch; 
    -ms-flex-line-pack: stretch; 
    align-content: stretch; 
    -webkit-box-align: start; 
    -moz-box-align: start; 
    -webkit-align-items: flex-start; 
    -ms-flex-align: start; 
    align-items: flex-start; 
    } 

.flex-item:nth-child(1) { 
    -webkit-box-ordinal-group: 1; 
    -moz-box-ordinal-group: 1; 
    -webkit-order: 0; 
    -ms-flex-order: 0; 
    order: 0; 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    -webkit-flex: 0 1 auto; 
    -ms-flex: 0 1 auto; 
    flex: 0 1 auto; 
    -webkit-align-self: auto; 
    -ms-flex-item-align: auto; 
    align-self: auto; 
    } 

.flex-item:nth-child(2) { 
    -webkit-box-ordinal-group: 1; 
    -moz-box-ordinal-group: 1; 
    -webkit-order: 0; 
    -ms-flex-order: 0; 
    order: 0; 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    -webkit-flex: 0 1 auto; 
    -ms-flex: 0 1 auto; 
    flex: 0 1 auto; 
    -webkit-align-self: auto; 
    -ms-flex-item-align: auto; 
    align-self: auto; 
    } 

.flex-item:nth-child(3) { 
    -webkit-box-ordinal-group: 1; 
    -moz-box-ordinal-group: 1; 
    -webkit-order: 0; 
    -ms-flex-order: 0; 
    order: 0; 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    -webkit-flex: 0 1 auto; 
    -ms-flex: 0 1 auto; 
    flex: 0 1 auto; 
    -webkit-align-self: auto; 
    -ms-flex-item-align: auto; 
    align-self: auto; 
    } 

/* 
    Legacy Firefox implementation treats all flex containers 
    as inline-block elements. 
*/ 

@-moz-document url-prefix() { 
.flex-container { 
    width: 100%; 
    -moz-box-sizing: border-box; 
    } 

} 

другой способ симулировать horizontal-align-content:justify (это состоит из правила). http://codepen.io/gcyrillus/pen/Babcs

с немного меньшим количеством CSS, чтобы адаптировать для старых IES

.justify { 
    text-align:justify; 
    line-height:0; 
} 
.justify:after, .justify span.ie { 
    content:''; 
    display:inline-block; 
    width:100%; 
    vertical-align:top; 
} 
.justify > div { 
    text-align:left; 
    line-height:1.2em; 
    display:inline-block; 
    *display:inline; 
    zoom:1; 
    width:50%; 
    border:solid; 
} 
.justify > div:nth-child(odd) { 
    width:20%; 
} 

Float и дисплей: стол уже обсуждали :)

Answer 5

Вы можете сделать что-то вроде этого:

body {     /* or parent element of below child elements */ 
    position: relative; 
} 
.left-col { 
    float: left; 
    width:25%; 
    height:100px; 
    background-color:blue; 
    position:absolute; 
    top:0; 
    left: 0; 
} 
.center-col { 
    width: 10%; 
    height:100px; 
    margin: 0 auto; 
    background-color: cornflowerblue; 
    text-align:center; 
} 
.right-col { 
    width: 25%; 
    height:100px; 
    background-color:green; 
    text-align: right; 
    position:absolute; 
    top:0; 
    right: 0; 
} 

Working Fiddle

Следует принять меры к тому, чтобы сумма ширины трех элементов не превышала 100%. если вы хотите использовать границы для этих элементов, тогда создайте дочерние элементы для каждого элемента и дайте им position: absolute. Что-то вроде этого:

.childDiv{ 
    position: absolute; 
    top: 2px;     /* acts as border-top for parent element*/ 
    bottom: 2px;    /* border-bottom */ 
    left: 2px;    /* border-left */ 
    right: 2px;    /* border-right */ 
    background-color: black; /* acts as border-color for parent element */ 
}