CSS, чтобы иметь одинаковую ширину для двух div
Поэтому я пытаюсь создать отзывчивый CSS за два divs. Первый div для сводки, а второй div для краткого описания. Как я могу сделать так, чтобы второй div находился прямо под первым div, а второй div заворачивался, если содержимое второго div превышает ширину первых div?
div.firstdiv {
padding: 60px 0;
}
div.seconddiv {
padding: 30px;
text-align: center !important;
}<div class = "firstdiv">This is a test for customer issues & solutions
<div class = "seconddiv">We need to address the customer issues and provide them the appropriate solutions based on issue priority
</div>@G-Cyr Он хочет, чтобы второй div был под первым div. Он также хочет обернуть текст, если он превышает ширину текста. (Я думаю)
этот трюк должен сработать; stackoverflow.com/a/55041133/8620333 (встроенный блок для родителя и min-width:100% width:0 для второго текста)
Спасибо. Ваше предложение сработало.
Ответы 2
Вы можете попробовать что-то с сеткой отображения, если хотите иметь фиксированный размер в первом div.
Решение состоит в том, чтобы иметь оба div в одной оболочке и использовать CSS Grid в div-оболочке. Так:
div.grid{
display: grid;
grid-template-columns: minmax(min-content, 300px);
grid-gap: 10px;
}<div class = "grid">
<div class = "firstdiv">
This is a test for customer issues & solutions
</div>
<div class = "seconddiv">We need to address the customer issues and provide them the appropriate solutions based on issue priority
</div>
</div>Ответ на ваш вопрос содержится в самом вопросе. Вот как элементы ведут себя естественно. Нет необходимости, чтобы ваш второй div был внутри вашего первого, просто сделайте их братьями и сестрами, например:
<div class = "firstdiv">
This is a test for customer issues & solutions
</div>
<div class = "seconddiv">
We need to address the customer issues and provide them the appropriate solutions based on issue priority
</div>
И ваш CSS:
.firstdiv, .seconddiv {
width:100%; // or whatever you'd like the width to be
margin:10px // again, whatever you'd like.
}
По умолчанию элемент seconddiv будет отображаться под элементом firstdiv, ширина будет равна, а текст будет обтекаться.
Примечание: вы должны обернуть текст тегом p или чем-то подобным, а не просто плавать внутри вашего div.
Я не понимаю вашего вопроса. Можете ли вы уточнить и проверить свою разметку?