Мобильная версияПроблема, с которой я столкнулся. Облицовка заключается в том, что высота контейнера ответов не регулируется динамически в зависимости от количества кнопок или при переносе кнопок на следующую строку. Вместо этого он остается фиксированным, вызывая неожиданное поведение:
< /p>
Как вы можете видеть на изображении, оно почти перекрывает контейнер ниже (что нежелательно), я хочу сохранить постоянное пространство между контейнером ответов и контейнером с кнопками ниже.
Я думаю, что если мне удастся динамически регулировать высоту, я смогу установить что-то вроде поля-верха для контейнера кнопок и таким образом сохранить постоянное пространство. Когда я делаю это сейчас, верхний край соответствует первой строке только с ответами, и поэтому следующие строки по-прежнему перекрывают контейнер кнопок.
Вот упрощенная версия моего компонента React и CSS:
Код: Выделить всё
body, html, #root {
margin: 0;
padding: 0;
height: 100%;
/* width: 100%; */
}
.container {
width: 786px;
/* height: 244px; */
min-height: 244px;
position: absolute;
top: 35%;
left: 327px;
}
.question {
width: 583px;
height: 88px;
left: 102px;
position: relative;
margin-bottom: 16px;
font-family: Grange;
font-size: 40px;
font-weight: 500;
line-height: 44px;
text-align: center;
min-height: 88px;
word-wrap: break-word;
overflow-wrap: break-word;
}
.answers-container {
width: 100%;
height: 44px;
top: 120px;
gap: 10px;
justify-content: center;
/* width: fit-content; */
display: flex;
flex-wrap: wrap;
max-width: 985px;
margin-bottom: 50px;
}
.answer {
border-radius: 8px;
border: 1px solid #5bc1ed;
justify-content: center;
align-items: center;
padding: 10px 20px;
font-size: 16px;
background-color: white;
cursor: pointer;
transition: background-color 0.3s;
width: fit-content;
min-width: 189px;
text-align: left;
}
.answer:hover {
background-color: #e0f7ff;
}
.answer-text {
white-space: nowrap;
}
.answer-text {
font-family: Proxima Nova;
font-size: 16px;
font-weight: 400;
line-height: 16px;
width: 129px;
height: 16px;
text-align: left;
/* margin-left: 8px; */
margin: 9px auto;
}
.next-back {
width: 244px;
height: 48px;
top: 196px;
left: 271px;
gap: 20px;
position: absolute;
display: flex;
justify-content: flex-end;
align-items: center;
/* margin-top: 20px; */
}
.button-next {
width: 189px;
height: 48px;
padding: 14px 40px 14px 40px;
gap: 8px;
border-radius: 8px;
display: flex;
/* margin-left: 100%; */
background: #c3edff;
}
.button-text {
font-family: Proxima Nova;
font-size: 16px;
font-weight: 500;
line-height: 19.49px;
text-align: center;
width: 98px;
display: flex;
height: 19px;
}
.arrow-icon {
width: 20px;
height: 20px;
}
.arrow {
width: 14.14px;
height: 14.14px;
top: -0px;
left: 10px;
gap: 0px;
opacity: 0px;
/* angle: -45 deg; */
}
.back-link {
width: 35px;
height: 19px;
gap: 8px;
border-radius: 8px;
font-family: Proxima Nova;
font-size: 16px;
font-weight: 500;
line-height: 19.49px;
text-align: center;
color: #677487;
display: flex;
justify-content: center;
align-items: center;
text-decoration: underline;
}Код: Выделить всё
What benefit do you look for in your hair products?
handleAnswer('Anti-breakage')} className='answer'>
a. Anti-breakage
handleAnswer('Hydration')} className='answer'>
b. Hydration
handleAnswer('Soothing dry scalp')} className='answer'>
c. Soothing dry scalp
handleAnswer('Repairs appearance of damaged hair')} className='answer'>
d. Repairs appearance of damaged hair
handleAnswer('Volume')} className='answer'>
e. Volume
handleAnswer('Curl and coil enhancing')} className='answer'>
f. Curl and coil enhancing
[url=/second]Back[/url]
[*]
Next question
Что я пробовал:
< ul>
Удаление фиксированной высоты из .answers-container.
[*]Обеспечение гибкого переноса: перенос применяется к .answers-container.
[*]Обеспечение применения justify-content: center к .answers-container.
[*]Проверка фиксированной высоты или других конфликтующих стилей в родительских элементах.
Ожидаемое поведение:
Я ожидаю, что контейнер ответов будет динамически регулировать свою высоту в зависимости от количества содержащихся в нем кнопок (элементов ответа) и времени они переходят на следующую строку. Таким образом, при переносе кнопок не должно быть ненужных пробелов или переполнения.
Текущее поведение:
Высота контейнера ответов остается исправлено, вызывающее переполнение кнопок.
Вопрос:
Как я могу гарантировать, что высота контейнера ответов динамически регулируется в зависимости от его содержимого (кнопки ) в приложении React с использованием CSS? Какие изменения мне следует внести в компонент CSS или React, чтобы добиться такого поведения?
Подробнее здесь: https://stackoverflow.com/questions/786 ... ct-with-cs
