Получение идеального 3-колоночного макета

Question

Мне немного сложно попытаться отсортировать раскладку 3-х столбцов. Это мой текущий HTML и CSS макет

<div class="row"> 
    <div class="col">C1</div> 
    <div class="col">C2</div> 
    <div class="col">C3</div> 
</div> 

CSS-выглядит следующим образом:

.row { 
    width: 964px; 
} 

.row:last-child { 
    margin: 0; 
} 

.row .col { 
    width: 33.33% 
    float: left; 
    margin-bottom: 20px; 
    margin-right: 10px; 
} 

Колонки имеют в основном одинаковую ширину, используя проценты 33,33%. Проблема заключается в том, что, хотя столбцы отображаются внутри контейнера строк, в последнем столбце есть пробел на правом поле. Увеличение правого поля подталкивает последний столбец к следующей строке.

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

Спасибо ..

Answer 1

.row .col:last-child 
{ 
    margin-right:0; 
} 

это будет делать. но, не забудьте включить его после '.row.col' стиле

Answer 2

Использование % вместо рх здесь margin-right: 10px;

.col{ 
    width: 32%; 
    margin-right: 2%; 
} 

.col:last-child{ 
    margin-right: 0%; 
} 

Answer 3

вы должны использовать

.row{ 
display:table; 
} 
.col{ 
display:table-cell; 
} 

ПРИМЕР:

.row{ 
    display:table; 
    width:100%; 

} 
.col{ 
    border:1px solid #000; 
    display:table-cell; 
    width:33%; 

} 

FIDDLE DEMO

Answer 4

Если строка фиксированной ширины (964px), то вы не можете просто вычислить ширину столбцов, которые вы хотите и поставить запас как слева и справа на втором столбце?

Кроме того, 964 не делится на три, так что это немного странный выбор - вы всегда будете сталкиваться с проблемами округления - я изменил его на 963px для примера ниже.

например.

<div class="row"> 
    <div class="col">C1</div> 
    <div class="col middle">C2</div> 
    <div class="col">C3</div> 
</div> 

с помощью CSS:

.row .col { 
    width: 321px; 
    float: left; 
    margin-bottom: 20px; 
} 

.row .middle { 
    margin-left: 10px; 
    margin-right: 10px; 
} 

Answer 5

Спасибо за ответы, ребята, я в конечном итоге того, чтобы изменить количество обивки, что мой основной контейнер сайта использует. Как только у меня была ширина 970px, я просто заимствовал немного css из Bootstrap, чтобы правильно отобразить макет.

Конечный результат существо:

.row { 
    margin-right: -15px; 
    margin-left: -15px;  
} 

.col { 
    float: left; 
    width: 33.33333333%; 
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 
} 

что линии все вверх идеально подходит для меня.