Как я могу расположить изображение и текст в гибкой строке?
Я пытаюсь уменьшить как изображение, так и столбец с текстом справа. В то же время. На данный момент сжимается только текст, пока экран не станет слишком маленьким для обоих столбцов.
Это мой первый раз, когда я использую flex для всего сайта, поэтому я упускаю некоторые концепции.
Идея состоит в том, чтобы изображение и текст всегда имели одинаковую ширину.
Это версия только для настольных компьютеров и экранов планшетов. Версия movil будет доставлять другой контент.
.twoColumns {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.responsive {
max-width: 100%;
height: auto;
}
.right {
width: 600px;
max-width: 100%;
margin-left: 28px;
}<div class = "twoColumns">
<img src = "https://dummyimage.com/600x400/000/fff" class = "responsive" width = "600">
<div class = "right" class = "responsive">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>
Ответы 4
Удалите все фиксированные ширины и вложите изображение в div.
.twoColumns {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.responsive {
max-width: 100%;
height: auto;
}
.right {
max-width: 100%;
margin-left: 28px;
}<div class = "twoColumns">
<div class = "left">
<img src = "https://dummyimage.com/600x400/000/fff" class = "responsive">
</div>
<div class = "right" class = "responsive">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>Ваши два max-width мешали алгоритму гибкости. Используйте встроенное сокращение flex для flex-потомков, говоря им, чтобы они увеличивались со скоростью 1, уменьшались со скоростью 1 и начинали с 50% родительского пространства соответственно.
Я также добавил максимальную ширину 50% для дочерних элементов, чтобы сжать изображение при очень маленькой ширине.
Возможно, вы предпочтете использовать современное свойство gap для зазоров с flex/grid вместо использования margin-left.
Изменение размера, переполнение и цвет фона предназначены только для этой демонстрации.
Обновлено: Вы также можете добавить word-break для очень маленькой ширины, когда ваши слова слишком длинные, чтобы поместиться.
.twoColumns {
display: flex;
gap: 28px;
flex-direction: row;
justify-content: space-between;
resize: both;
overflow: auto;
background-color: #eee;
}
.responsive,
.right {
max-width: 50%;
flex: 1 1 50%;
word-break: break-word;
}<div class = "twoColumns">
<img src = "https://source.unsplash.com/random/200x200" class = "responsive">
<div class = "right" class = "responsive">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>Вы также можете использовать CSS Grid:
.twoColumns {
display: grid;
gap: 28px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100%;
resize: both;
overflow: auto;
background-color: #eee;
}
.responsive {
width: 100%;
word-break: break-word;
}
.right {
background-color: skyblue;
}<div class = "twoColumns">
<img src = "https://source.unsplash.com/random/200x200" class = "responsive left">
<div class = "responsive right">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>Я думаю, вам может понадобиться что-то вроде этого:
.left {
flex: 50%;
}
.right {
flex: 50%;
width: 600px;
max-width: 100%;
margin-left: 28px;
}<div class = "twoColumns">
<div class = "left">
<img src = "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGNoYW5nZXxlbnwwfHwwfHw%3D&w=1000&q=80" class = "responsive" width = "600">
</div>
<div class = "right" class = "responsive">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>Еще одно интересное решение. Я проверю 3 ответа в учебных целях. Спасибо МД!
.section1 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.responsive {
max-width: 100%;
height: auto;
}
.right {
width: 100%;
margin-left: 20px;
display: flex;
align-items: center;
}<div class = "section1">
<div class = "left">
<img src = "https://dummyimage.com/600x400/000/fff" class = "responsive">
</div>
<div class = "right" class = "responsive">
an open platform for founders to connect, launch ideas/products, find recommended
</div>
</div>
Интересное решение. Добавлю к учебе. Спасибо, Зак!