Я делаю веб-страницу, похожую на «страницу новостей», и она отлично работает на дисплее 16: 9, но борется с вкладками меньшей ширины. Есть три решения, которые я хочу протестировать. width
Прекратите использовать поля, найдите другой способ держать div подальше от стороны вкладки и заставить его исчезать под определенной шириной вкладки.
Я не знаю, работает ли что-либо из этого, но я видел страницы, делающие это, и я хочу, чтобы эта функция была на моей странице. К сожалению, на инте rnet ничего подобного не нашел и просто надоело. Я ничего не пробовал из-за незнания решения этой проблемы. Чтобы продемонстрировать проблему, мой код: (HTML со встроенным css)
<html>
<body>
<div style= "width:60%; margin-left:20%;">
<p style="
margin:0px;
word-wrap:break-word;
margin-top:0px;">Praesent semper, leo ac scelerisque
volutpat, massa ex volutpat dui, in
suscipit mauris neque auctor quam.
Vestibulum vel finibus elit.</p>
</div>
</body>
</html>
Как видите, если страница уменьшена до небольшой (около 1000 пикселей) ширины, 40% пустого места слишком много, поэтому я хочу найти способ избавиться от этого поля и установить ширину на 100%. Я не хочу использовать поля, поэтому, если есть возможность использовать что-то еще, я был бы очень счастлив.
То, что я пробовал №1:
<html>
<body>
<div style= "width:60%; margin: 0 auto; min-width:500px">
<p style="
margin:0px;
word-wrap:break-word;
margin-top:0px;">Praesent semper, leo ac scelerisque
volutpat, massa ex volutpat dui, in
suscipit mauris neque auctor quam.
Vestibulum vel finibus elit.</p>
</div>
</body>
</html>
Путем горизонтального центрирования div и добавления минимальной ширины. У меня
- Удалены поля
- Пустые части исчезают при определенной ширине
Но этот метод по-прежнему не тот, который я хочу использовать, потому что, если страница меньше указанного значения, вам придется прокручивать в сторону, чтобы читать.
Мне помогли многие люди на этом сайте и в других другие платформы и решили проблему с flexbox. Спасибо за помощь.