Итак, у меня есть страница, сгенерированная React HTML, которая вставляется на другую страницу, и я с трудом пытаюсь заставить некоторые div'ы правильно обернуться при изменении размера страницы. Другие части страницы изменяют размер должным образом, но когда дело доходит до 3-х div, сгенерированных шаблоном, он не перестраивается.
В настоящее время у меня есть 1 родительский div, который содержит два дочерних div с 4 дочерними Divs в этом. В настоящее время я пытаюсь сделать этот ответ, так что, когда страница становится меньше, чем 1000px (максимальная ширина родительского div в сером), он переместит Child Div # 2 на следующую строку. Мне бы также хотелось, чтобы размер экрана становился меньше размера Child Div # 1/2 A / B / C / D. Это я могу выяснить, могу ли я изменить размеры исходного Div # 1 и Child Div # 2, чтобы изменить его размер во внешнем сером div.
В настоящее время родитель имеет стиль:
"borderRadius": "10px",
"max-width": "1000px",
"position": "relative",
"marginLeft": "auto",
"marginRight": "auto",
"padding": "5px",
"display": "flex"
А два дочерних элемента - это клоны (за вычетом различий в цветах):
"width": "50%",
"borderRadius": "5px",
"float": "left",
"margin": "5px"
Я предполагал, что если я установлю максимальную ширину родительского элемента и настрою отображение на изгиб, то будет ли автоматически перемещаться влево на следующей строке, когда div будет вынужден изменить размер?
Я видел некоторые решения, использующие @media, но у меня нет права не создавать лист CSS. Есть ли способ выполнить sh, используя только стилизацию HTML и свойства дисплея?
Я просмотрел несколько разных постов на SO, и обычно я могу определить действие для возьмите, но эта специфическая c отзывчивость мне мешает, так как HTML генерируется React и отображается на другой странице. Будем благодарны за любые советы!
Два деления рядом друг с другом, которые затем складываются с отзывчивым изменением
Перемещение элементов на новую строку в браузере Изменение размера
На изображениях ниже вы можете видеть, что, поскольку я установил максимальную ширину, он сжимает родительский div, но не заставляет дочерний div # 2 переходить на go до следующего линия, но скорее сокращается, что тоже.
