Написал такой код:
<template>
<MyHeader />
<h1 class="title">
<img class="title__icon" src="@/assets/Travel.svg" alt="Иконка Путешествие"/>Путешествие
</h1>
<div class="theatre-block">
<div class="theatre-block__div">
<img class="theatre-block__img" src="@/assets/Kareliya.png" alt="Карелия"/>
<h3 class="theatre-block__div-title">Карелия</h3>
</div>
</div>
</template>
<script>
import MyHeader from "@/components/MyHeader";
export default {
name: "TheatrePage",
components: {MyHeader}
}
</script>
<style scoped>
.title {
color: #FFF;
display: flex;
text-align: center;
align-items: center;
font-family: "Caveat", cursive;
font-size: 60px;
justify-content: center;
}
.theatre-block {
display: flex;
background: rgba(61, 59, 59, 0.8);
border: 1px solid #D9D9D9;
border-radius: 20px;
width: 95vw;
padding: 40px 20px;
height: auto;
margin: 10px auto;
}
.theatre-block__div {
width: 45vw;
box-sizing: border-box;
position: relative;
border-radius: 30px;
}
.theatre-block__div-title {
color: #FFF;
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1;
}
.theatre-block__img {
display: block;
width: 100%;
position: absolute;
}
</style>
Но у меня не хочет родительский блок .theatre-block__div менять свою высоту. Он по прежнему остается с нулевой высотой. Что делать?
(Код написан на Vue 3, возможно некоторым будет непонятно.)
Средний
