Поддерживать ширину пролета, даже если в нем ничего нет

Можно ли поддерживать ширину диапазона как-то, если он пуст?

У меня есть следующая псевдо-таблица HTML:

<p><span class="col1">Day:</span><span class="col2"><?php echo somephp ?></span></p>
<p><span class="col1">Time:</span><span class="col2"><?php echo somephp ?></span></p>
<p><span class="col1">Class:</span><span class="col2"><?php echo somephp ?></span></p>
<p><span class="col1">Teacher:</span><span class="col2"><?php echo somephp ?></span></p>

С CSS:

span.col1 {width: 100px;float: left;}
span.col2 {width: 100px;}

Иногда PHP, который повторяется в col2, пуст, и когда это происходит, ширина col2 равна 0 и col1 в нижеследующем абзаце, она заканчивается в столбце выше рядом с col1.

Ответ 1

Пролисты col2 игнорируют ширину, потому что они являются встроенными элементами. Вам нужно сделать их встроенными блочными элементами.

span.col2 { width: 100px; display: inline-block }

Также имейте в виду, что вам может потребоваться добавить к нему высоту в зависимости от того, где она отображается, или вы получите ширину в 100 пикселей, но высоту 0px.

Ответ 2

По умолчанию элемент span является встроенным элементом и игнорирует ширину.

Попробуйте добавить отображение: блокируйте свои промежутки.

span.col1 {width: 100px;float: left; display:block;}
span.col2 {width: 100px; display:block;}

Надеюсь, что это поможет.

Ответ 3

По умолчанию span отображается как встроенный.

Итак, добавьте display:block, чтобы дать ему блок-элемент, или дополнительно вы можете использовать display:inline-block, чтобы он был встроен с остальной частью текста (без использования float).