Прошу помощи в следующей задаче: Хочу реализовать адаптивную секцию с текстом и изображением 50/50 на полный экран. Желательно в CSS самым элементарным способом.
Сайт для примера: (вторая секция вниз) https://www.quay.com.au
Проблема: Не могу установить ни фон, ни картинку для правой секции.
*{
padding: 0;
margin: 0;
}
.d{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.text{
background-color: tomato;
width: 50vw;
height: 50vw;
font-size: 120px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
.p{
background-image: url('data:image/jpeg;base64,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');
-webkit-background-size: contain;
background-size: contain;
width: 50vw;
height: 50vw;
}
<div class="d">
<div class="text">text</div>
<div class="p"></div>
</div>
Bootstrap, разделить, и тогда на каждый блок добавить свой дизайн, а так же можно создать подблоки, для текста
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском
ИтакПередача объекта класса Pri в класс Event происходит успешно
Разбираюсь с рисовкой в Qt, пытаюсь нарисовать свою графическую фигуру, используя QPainterPathДля этого создаю класс class PuzzlePiece : public QGraphicsPathItem