Сделайте текстовое обертывание вокруг изображения ⇐ Html

[Anonymous]

Я в настоящее время изо всех сил пытаюсь добиться проекта продвинутого HTML/CSS в проекте ODIN, который включал адаптивный дизайн.
https://cdn.staly.io/gh/theodinproject/ ... b18d6e3afe 034/advanced_html_csss/respressive-design/project_personal_portfolio/imgs/portfolio%20tablet.png Вот макет для планшета
https://cdn.staly.io/gh/theodinproject/ ... tio/Portio Макет для Cumputer < /p>
Я в настоящее время умногнул сайт для настольного компьютера, однако для заголовка я использовал Display Flex на заголовке и умрил изображение и текстовый контейнер в двух различных контейнере. Для планшета я хотел бы сделать изображение в том же контейнере, что и текст, и использовать Float Laft, а затем, возможно, настраивать позицию с относительным положением.
Считается ли плохой практикой использовать Display None в медиа -запросах Два имитации два HTML?




Aymeric SABRIÉ

About me
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.













< /code>
body{
display: flex;
align-items: center;
flex-direction: column;
}

header{
position: relative;
padding: 20px;
max-width: 1200px;
min-width: 1080px;
display: flex;
align-items: center;
}

body::before{
width: 100%;
display: block;
background-color: #0891b2;
min-height: 550px;
position: absolute;
content: "";
z-index: -0.5;
transform: skew(0,-10deg);
top: -200px;
}

.text-container{
max-width: 450px;
background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
min-height: 290px;
gap: 5px ;
z-index: 0;
}

.presentation-photo{
max-width: 300px;
}

header>*{
box-shadow: 5px 5px 2px 1px rgba(0, 0, 0, 0.233);
}

.icon{
width: 20px;
height: auto;
}

.icon-container{
display: flex;
gap: 10px;
align-self: flex-end;
margin-top: auto;
}

.header-title{
font-family:"Playfair Display" ;
}

.text-container{
font-family: "Roboto";
}

.picture-container{
position: relative;
}

.caption{
position: absolute;
bottom: 0;
padding: 10px;
font-size: 2.2rem;
color: white;
text-align: center;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}



Подробнее здесь: https://stackoverflow.com/questions/795 ... ound-image