Как сделать так, чтобы слово «dl» переносилось так же, как таблица «td»?

html css wrap

28 просмотра

1 ответ

Я пытаюсь избежать использования таблиц для форматирования, когда это возможно.

В таблице, если ячейка в моем втором столбце нуждается в переносе, она будет переноситься только внутри этой ячейки. Когда я пытаюсь использовать список (dl), «второй столбец» (dd) переносится на всю строку.

dt {
    display: block;
    float: left;
    text-align: right;
    color: black;
    width: 150px;
}

    dt::after {
        content: ":";
        padding-left: .5em;
        padding-right: .5em;
    }

dd {
    display: block;
    color: blue;
}
<dl>
      <dt>System Type</dt><dd>My System Type</dd>
      <dt>Manufacturer</dt><dd>Very very very very very long second column</dd>
    </dl>

```

Скриншот вывода (мне пока не разрешено вставлять изображения)

Автор: NHSnowSkier Источник Размещён: 17.05.2019 02:36

Ответы (1)


0 плюса

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

Вам нужно настроить значение 120px в соответствии с вашими потребностями, это то, что выглядело лучше всего с двумя предоставленными значениями.

* {
    margin: 0;
}
dl {
    width: 100%;
}
dt {
    float: left;
    text-align: right;
    /* Hard code the width of the first column here */
    width: 120px;
}
dt::after {
    content: ":";
    padding-left: .5em;
    padding-right: .5em;
}
dd {
    float: left;
    /* Hard code the width of the 2nd column here...
       ... make it take up all the remaining space of the parent
    */
    width: calc(100% - 120px);
}
<dl>
    <dt>System Type</dt><dd>My System Type</dd>
    <dt>Manufacturer</dt><dd>Very very very very very long second column Very very very very very long second column Very very very very very long second column Very very very very very long second column Very very very very very long second column</dd>
</dl>

Автор: JeremyW Размещён: 01.04.2019 09:28
Вопросы из категории :
32x32