Стек DIV или столбцы таблицы на мобильных устройствах - только HTML и встроенные CSS, без таблиц стилей или медиа-запросов

Question

это немного раздражает.

Я редактирую HTML блоков на сайте Moodle (немного похоже на редактирование контента в Wordpress, но без параметров стиля - только HTML! ) - не позволяет мне добавлять CSS. Каждый раз, когда я это делаю, он удаляет его при сохранении моего редактирования.

Итак ... Я некоторое время пытался (и я не очень хорошо умею веб-кодирование!), Чтобы создать стандартный блок меню используя таблицу или div. Я хочу, чтобы они соответствовали ширине 100%, а затем складывались на мобильном телефоне. Текст в каждом блоке также должен быть отзывчивым.

Я пробовал использовать встроенный CSS, используя display: inline-block, но он никогда не работает ... Не совсем понимаю, как работает дисплей.

Вот мой код до сих пор - извиняюсь, я не кодировщик - сделал html однажды десятилетия go!

Любая помощь, очень признателен. Помните, что нет CSS листа или медиа-запросов - чисто HTMl и только встроенные CSS .. Вздох ...

    <div style=width:100%; height: auto; display:inline-block";>
        <div style="width: 23%; text-align: center; display: inline-block; align: left; background-color: #ffdd00; height: 40px; padding-left:50";>

<h style="width: 25%; height: 35";><a href="https://blabla.com" style="text-decoration: none;"><strong><span style="font-family: arial, helvetica, sans-serif; font-size: 2vw;">home</span></strong></a></h>
</div>

<div style="width: 25%; text-align: center; display: inline-block; align: left; background-color: #ffdd00; height: 40px; padding-left:50";>

<h style="width: 25%; height: 35";><a href="https://blabla.com" style="text-decoration: none;"><strong><span style="font-family: arial, helvetica, sans-serif; font-size: 2vw;">home</span></strong></a></h>
</div>

<div style="width: 23%; text-align: center; display: inline-block; align: left; background-color: #ffdd00; height: 40px";>

<h style="width: 23%; height: 35";><a href="https://blabla.com" style="text-decoration: none;"><strong><span style="font-family: arial, helvetica, sans-serif; font-size: 2vw;">home</span></strong></a></h>
</div>

<div style="width: 23%; text-align: center; display: inline-block; align: left; background-color: #ffdd00; height: 40px";>

<h style="width: 23%; height: 35";><a href="https://blabla.com" style="text-decoration: none;"><strong><span style="font-family: arial, helvetica, sans-serif; font-size: 2vw;">home</span></strong></a></h>
</div>
</div>

Answer 1

Счастливые дни. Давайте проясним несколько вещей:

• В данный момент у вас есть контейнер шириной 100%, содержащий div шириной 23%, с h шириной 23% , что означает, что h имеет ширину только 23% от 23%. Я бы предложил удалить ширину этого h.
• Также: <h> не существует. <h1>, <h2> ... <h6> делать. Используйте их и пометьте их соответствующим образом. Если это станет слишком уродливым, оставьте только тег привязки с этим диапазоном внутри.
• В вашем коде есть ошибки. ";> - недопустимый способ закрытия тегов. Вместо этого используйте ;">.
• align:left; в целом не работает должным образом.

Чтобы ответить: при использовании ширины 23% это означает что вы всегда пытаетесь уместить эти элементы на ширину 23% внутри контейнера, и это не будет обертываться (он попытается втиснуть их все). Насколько мне известно, невозможно достичь идеального результата без использования медиа-запросов. Однако вы можете попробовать установить min-width в четырех разделах с фиксированным значением, например 320 пикселей или около того (обратите внимание, что они все еще должны соответствовать на мобильном устройстве). Тогда будет нужно обернуть . Кроме того, вы можете поиграть с text-align, margin:auto. Бонус: попробуйте заменить display:inline-block на float:left;, так как это удалит пробелы между элементами. Обратите внимание, что разметка может завершиться ошибкой, и в этом случае добавьте <div style="clear:both;"></div> внизу этого контейнера-div.