#html #css #web
Вопрос:
Я работаю над макетом страницы, все еще довольно новичок в этом. Страница содержит различные панели разных размеров. Общее содержимое панели выглядит так:
lt;div class="ui-g"gt; lt;div class="ui-g-6"gt; lt;stronggt;Some metadata namelt;/stronggt; lt;/divgt; lt;div class="ui-g-6"gt; lt;stronggt;Some valuelt;/stronggt; lt;/divgt; lt;/divgt; lt;div class="ui-g"gt; lt;div class="ui-g-6"gt; lt;stronggt;Some metadata namelt;/stronggt; lt;/divgt; lt;div class="ui-g-6"gt; lt;stronggt;Some valuelt;/stronggt; lt;/divgt; lt;/divgt; ... Теперь я работаю над отзывчивостью: при использовании функции увеличения масштаба браузера, если у этих пар заголовок/значение недостаточно места, чтобы оставаться друг под другом, я бы хотел, чтобы они перекрывались друг под другом: От
Title1 Value1 Title2 Value2 Title3 Value3 Для
Title1 Value1 Title2 Value2 Title3 Value3 Это работает с помощью
.ui-g { display: flex; flex-wrap: wrap; } .ui-g-6 { min-width: 200px; width: 50%; max-width: 100%; box-sizing: border-box; } Теперь моя проблема заключается в следующем: Для некоторых панелей, таких как
Title Value Value Value Value Value Value Value Value Value Value , при прокрутке я сначала получаю
Title Value Value Value Value Value Value Value Value Value Value и затем
Title Value Value Value Value Value Value Value Value Value Value даже несмотря на то, что я ожидал
Title Value Value Value Value Value Value Value Value Value Value до тех пор, пока в этой строке будет достаточно места.
Как я могу этого добиться?
Комментарии:
1. Пожалуйста, поделитесь своим кодом с помощью фрагмента кода
2. Привет:) Не стоит менять макет в «функции увеличения масштаба браузера». Возможно, вы имеете в виду изменить макет на более низкие разрешения?
3. @Azu Я работаю над правительственным проектом, который включает в себя тесты, гарантирующие хороший опыт для слабовидящих, и масштабирование с помощью Ctrl Scroll является одним из примеров тестирования. Но да, я думаю, что более низкое разрешение было бы эквивалентным случаем, конечно.
4. @Katheer какой код отсутствует? Я уже добавил свой CSS.