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

Question

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

0

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

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

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

Вот моя скрипка

Я сделал ошибку с процентами?

Retador 18 сен. 2013, в 15:03

Источник

Теги:

html

css

percentage

multiple-columns

3 ответа

2

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

asifrc 18 сен. 2013, в 10:23

1

Уменьшите 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;
}

Harry 18 сен. 2013, в 10:43

2

Спасибо! Вы объяснили это очень хорошо! :)
Retador 18 сен. 2013, в 12:40

Ещё вопросы

Спасибо! Вы объяснили это очень хорошо! :)

Love Trivedi · Accepted Answer · 2013-09-18T11-18-00.000Z

Демо ЗДЕСЬ Используйте 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.

Спасибо за чаевые! Теперь последний столбец также работает правильно ...