Как я могу получить 3 столбца в одной строке?

Question

Я пытаюсь получить три столбца на одной строке. Это сработало, пока я не добавил некоторые дополнения к div. Я использую проценты, чтобы сделать его отзывчивым. Ниже это CSS:

.contentLine .column { 
    float: left; 
    margin: 0; 
    width: 31%; 
    margin-right: 1%; 
    padding: 1%; 
    position: inherit; 
} 

.contentLine .last { 
    margin-right: 0; 
} 

Here is my fiddle

ли я ошибусь с процентами?

Answer 1

Demo HERE Использовать margin-right: .5%;

.contentLine .column { 
float: left; 
margin: 0; 
width: 31%; 
margin-right: .5%; 
padding: 1%; 
position: inherit; 
} 

и измените последнюю колонку div следующим образом. потому что вы используете атрибут класса два раза, и вы можете использовать атрибут класса только один раз в одном теге.

Использование

<div class="column last"> 

не <div class="column" class="last"> это worng.

Answer 2

Уменьшите ширину столбцов. Со всеми добавленными процентами и дополнительным пространством все это добавляет более 100%, поэтому третий столбец всегда будет на следующей строке. Вместо 31%, попробуйте 30%.

Answer 3

Уменьшить width от .column до 30%.

В настоящее время идет до следующей строки, потому что есть 3 коробки с width 31% (всего 93%). У них есть padding (справа и слева) 1% (так что итого до 6%), и у вас есть margin-right 1% (что составляет 3%) и все вместе превышает 100%.

.contentLine .column { 
    float: left; 
    margin: 0; 
    width: 30%; 
    margin-right: 1%; 
    padding: 1%; 
    position: inherit; 
}