0

html игнорирует css style для div. Хочу что бы высота карт составляла 450px, а на деле их высота 190px. Подскажите что делать в такой ситуации, я не верстальщик, просто нужен frontend для проекта. То как выглядит блок с картами(https://imgur.com/a/FnuVY1B). И есть еще один вопрос кому не сложно, подскажите как можно сделать небольшие отступы между блоками с карточками пытался с помощью bootstrap grid, но по итогу они вплотную находятся друг к другу.

.card{
    width: 300px;
    height: 450px;
}


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--STYLE-->
    <link rel="stylesheet" href="./css/mainStyles.css">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/Flickity.css">

    <!--FONTS-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Belanosima&display=swap" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <title>CinemaOnline</title>
</head>
<body>

    <header class="header d-flex container justify-content-between align-items-center position-absolute" style="height: 90px; z-index: 1;">
        <img class="logo" src="../assets/logo.svg" alt="Logo" >
        <a href=""><img src="../assets/ProfileButton.svg" alt="" srcset=""></a>
    </header>

    <section class="slider">

        <div class="gallery js-flickity"
        data-flickity-options='{ "wrapAround": true }'>
            <div class="gallery-cell" 
            style="background-image: url(../assets/How-long-does-it-take-to-make-a-movie-trailer-explained.jpg);"></div>
            <div class="gallery-cell" 
            style="background-image: url(../assets/photo-1508919801845-fc2ae1bc2a28.jpg);"></div>
        </div>

    </section>

    <section class="content container mt-5">
        <h2>Currently playing</h2>

<!-- col-12 col-sm-6 col-lg-3-->

        <div class="row" style="height: auto;">
                <div class="card text-white col-12 col-sm-6 col-lg-3" style=" background-image: url(../assets/How-long-does-it-take-to-make-a-movie-trailer-explained.jpg); background-position: center;">
                    <div class="card-header" style="font-size: 24px; text-align: center;"><b>FILM NAME</b></div>
                    <div class="card-body d-flex flex-column justify-content-end">
                        <h5 class="card-title">Secondary card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div> 
                <div class="card text-white col-12 col-sm-6 col-lg-3" style=" background-image: url(../assets/How-long-does-it-take-to-make-a-movie-trailer-explained.jpg); background-position: center;">
                    <div class="card-header" style="font-size: 24px; text-align: center;"><b>FILM NAME</b></div>
                    <div class="card-body d-flex flex-column justify-content-end">
                        <h5 class="card-title">Secondary card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div> 

            </div>

        </div>
    </section>

    <script src="./js/flicky.js"></script>
    <script src="./js/main.js"></script>
    <script src="./js/bootstrap.js"></script>
</body>
</html>

1 ответ 1

0

Вот так это делается. И если используете grid вам по сути не нужны bootstrap-овские классы, которые я удалил.

.card {
  background-color: green;
  padding: 15px;
  color: white;
  min-height: 450px;
}
.cards-row {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}
<section class="content container mt-5">
        <h2>Currently playing</h2>

<!-- col-12 col-sm-6 col-lg-3-->

        <div class="cards-row" style="height: auto;">
                <div class="card text-white" style=" background-image: url(../assets/How-long-does-it-take-to-make-a-movie-trailer-explained.jpg); background-position: center;">
                    <div class="card-header" style="font-size: 24px; text-align: center;"><b>FILM NAME</b></div>
                    <div class="card-body d-flex flex-column justify-content-end">
                        <h5 class="card-title">Secondary card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div> 
                <div class="card text-white" style=" background-image: url(../assets/How-long-does-it-take-to-make-a-movie-trailer-explained.jpg); background-position: center;">
                    <div class="card-header" style="font-size: 24px; text-align: center;"><b>FILM NAME</b></div>
                    <div class="card-body d-flex flex-column justify-content-end">
                        <h5 class="card-title">Secondary card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div> 

            </div>

        </div>
    </section>

1
  • Спасибо большое! 6 июл в 13:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.