Ломается один из блоков

Question

когда меняю max-width у третей карточки она становится меньше остальных, хотя изображение и контент идентичны.

.third-card, .second-card, .first-card {
  max-width: 350px;
  background-color: rgba(37, 38, 39, 0.9);
  margin: 0 0 0 50px;
  display: inline-block;
}

.third-card .image, .second-card .image, .first-card .image {
  width: 100%;
  min-height: 200px;
}

.first-card .image {
  background: url("../source/image.jpg") 0 0/100% 100% no-repeat;
}

.second-card .image {
  background: url("../source/sharm-6.jpg") 0 0/100% 100% no-repeat;
}

.third-card .image {
  background: url("../source/image.jpg") 0 0/100% 100% no-repeat;
}

.content {
  width: 100%;
  margin: 50px 70px;
  color: #fff;
  border: black solid 1px;
  vertical-align: middle;
}
.content .text {
  padding: 30px 25px;
}
.content .text * {
  display: inline-block;
  margin-bottom: 20px;
}

* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Card</title>
</head>
<body>
    <div class="content">
        <div class="first-card">
            <div class="image"></div>
            <div class="text">
                <h1>Первый текст рыба</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus, repellat. Accusamus alias, est deleniti facere neque dolor, cupiditate vero qui ad quod ut. Pariatur voluptas libero animi esse, laborum error.</p>
                <span>Автор: Admin<br>Дата создания: 16.06.2022</span>
            </div>
        </div>

        <div class="second-card">
            <div class="image"></div>
            <div class="text">
                <h1>Второй текст рыба</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga perferendis eos iste dolores exercitationem, officiis nisi officia magnam est excepturi, quam sunt quis aliquid, odit cupiditate ipsam dolor autem deleniti.</p>
                <span>Автор: Admin<br>Дата создания: 16.06.2022</span>
            </div>
        </div>

        <div class="third-card">
            <div class="image"></div>
            <div class="text">
                <h1>Третий текст рыба</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga perferendis eos iste dolores exercitationem, officiis nisi officia magnam est excepturi, quam sunt quis aliquid, odit cupiditate ipsam dolor autem deleniti.</p>
                <span>Автор: Admin<br>Дата создания: 16.06.2022</span>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

Перевел во flex и добавил высоту 100%

.third-card, .second-card, .first-card {
  max-width: 311px;
    background-color: rgba(37, 38, 39, 0.9);
    margin: 0 0 10px 50px;
    display: flex;
    height: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.third-card .image, .second-card .image, .first-card .image {
  width: 100%;
  min-height: 200px;
}

.first-card .image {
  background: url("https://animaljournal.ru/articles/top/rekordsmeni/samie_bolshie_jivotnie/slon.jpg") 0 0/100% 100% no-repeat;
}

.second-card .image {
  background: url("https://animaljournal.ru/articles/top/rekordsmeni/samie_bolshie_jivotnie/slon.jpg") 0 0/100% 100% no-repeat;
}

.third-card .image {
  background: url("https://animaljournal.ru/articles/top/rekordsmeni/samie_bolshie_jivotnie/slon.jpg") 0 0/100% 100% no-repeat;
}

.content {
width: 100%;
    margin: 50px 50px;
    color: #fff;
    border: black solid 1px;
    vertical-align: middle;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.content .text {
  padding: 30px 25px;
}
.content .text * {
  display: inline-block;
  margin-bottom: 20px;
}

* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Card</title>
</head>
<body>
    <div class="content">
        <div class="first-card">
            <div class="image"></div>
            <div class="text">
                <h1>Первый текст рыба</h1>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus, repellat. Accusamus alias, est deleniti facere neque dolor, cupiditate vero qui ad quod ut. Pariatur voluptas libero animi esse, laborum error.</p>
                <span>Автор: Admin<br>Дата создания: 16.06.2022</span>
            </div>
        </div>

        <div class="second-card">
            <div class="image"></div>
            <div class="text">
                <h1>Второй текст рыба</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga perferendis eos iste dolores exercitationem, officiis nisi officia magnam est excepturi, quam sunt quis aliquid, odit cupiditate ipsam dolor autem deleniti.</p>
                <span>Автор: Admin<br>Дата создания: 16.06.2022</span>
            </div>
        </div>

        <div class="third-card">
            <div class="image"></div>
            <div class="text">
                <h1>Третий текст рыба</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga perferendis eos iste dolores exercitationem, officiis nisi officia magnam est excepturi, quam sunt quis aliquid, odit cupiditate ipsam dolor autem deleniti.</p>
                <span>Автор: Admin<br>Дата создания: 16.06.2022</span>
            </div>
        </div>
    </div>
</body>
</html>

БЛОГ НА HUSL

Ломается один из блоков

Ответы (1 шт):