Как я могу преобразовать этот табличный макет для использования семантического HTML с CSS-макетом?

Question

На изображении выше, большая часть html является семантической, используя css для управления внешним видом всего этого. Несмотря на все мои усилия, мне пришлось прибегнуть к использованию стола, чтобы получить сегмент справа, чтобы он оставался там, где он есть, и позволил его внутренним элементам плавно заворачиваться, когда он становится слишком большим для экрана, например:

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

Answer 1

вы пробовали использовать элементы списка?Обычно при создании элементов меню лучше использовать UL-> LI вместо span или div

Answer 2

Вы должны иметь возможность установить его ширину.Это трудно сделать, не видя, как именно вы это делаете, потому что CSS зависит от родительских размеров и т. Д.

Я бы тоже посмотрел на свойство CSS min-width.