Отобразить сетку, используя div

Question

Я пытаюсь попрактиковаться в CSS / HTML и перечисляю, что нужно сделать в таблице, используя div.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я устанавливаю поля, текст не выстраивается в столбцы должным образом, потому что один текст длиннее других, поэтому он приводит к появлению зубчатой ​​таблицы.

, например

123 hello coool
123 asdfasdfsadf  cool
123 hello coool
123 asdfasdfasdf  kkk

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

в чем здесь проблема? Есть ли этому решение (Я знаю, что с таблицей было бы легче, но я хочу изучить способ div)

Answer 1

Как вы заставляете свои дивы выстраиваться рядом друг с другом, то есть имитировать строки? Если вы используете поплавки, например float: left, то эффект, который вы испытываете, обычно известен как упаковка в термоусадочную пленку. В термоусадочной пленке div ширина div будет автоматически соответствовать длине содержимого.

Единственный чистый способ html / css это явно установить свойство width вашего div. Вам необходимо установить для каждого из divs в столбце одинаковую явную ширину. Чтобы это было эффективным, вам нужно иметь некоторое представление о длине вашего контента и установить width как минимум в ширину.

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

Answer 2

Вы можете сделать каждый столбец своим собственным div. EG:

<div class="col1">
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
</div>
<div class="col1">
    <p>hello</p>
    <p>asdfasdfasdf</p>
    <p>hello</p>
    <p>asdfasdfasdf</p>
</div>
<div class="col1">
    <p>cooool</p>
    <p>cooool</p>
    <p>cooool</p>
    <p>cooool</p>
</div>

и сделать

.col1 {
    float: left;
}

но это приведет только к боли и страданиям.

Я не знаю, почему вы хотите сделать это таким образом; возможно, вы слышали, что «таблицы ошибаются», но это неполно. Вся фраза «таблицы неправильны для макета ».

Используйте таблицы для табличных данных, как это.

Answer 3

Вы, вероятно, не назначаете им фиксированную ширину, в результате чего их размер автоматически определяется. Таблицы автоматически сделают каждую ячейку в столбце одинаковой ширины, но это невозможно сделать с помощью s, вам нужно установить фиксированную ширину.

Answer 4

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

Также в вашем примере вы бы использовали таблицу.