为什么当其中一个积木变大时，我所有的积木都会增加？

Question

我有三个块，由父块和子块组成。那么，为什么当其中一个变大时，我的所有积木都会增加？我怎样才能摆脱这个？

我的意思是，我将我的文本添加到第一个块中。为什么只有我的第一个块变大了？为什么它适用于所有块？

你可以在下面看到我的例子

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: sans-serif;
}

.groups_line {
    margin: 0 auto;
    width: 1565px;
    padding-right: 40px;
    padding-left: 40px;
    display: flex;
}

.line {
    width: 520px;
    min-height: fit-content;
    margin-right: 4px;
    display: flex;
    justify-content: center;
    padding-top: 170px;
    padding-bottom: 55px;
  background-size: cover;
}

.line:last-child {
    margin-right: 0px;
}

.first_group {
    background-image: url(https://i.postimg.cc/X7K9PsbD/13-2x.png);
}

.second_group {
    background-image: url(https://i.postimg.cc/hGvxfg7H/kaboompics-com-Woman-preparing-a-lunch-on-the-kitchen-table.png);
}

.third_group {
    background-image: url(https://i.postimg.cc/s2GXk2WD/photo-1453822858805-7c095c06011e.png);
}

.wrapper_foot {
    display: flex;
    justify-content: space-between;
    padding: 18px 15px 10px 15px;
}

.heading_block {
    font-family: "Open Sans";
    font-size: 14px;
  font-weight: 800;
    text-transform: uppercase;
    color: #b59f5b;
    margin: 20px 10px 15px 10px;
    text-align: center;
  
}

.text {
    color: #ffffff;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    margin-left: 55px;
    margin-right: 55px;
    text-align: center;
  line-height: 24px;
}

.data {
    opacity: 0.54;
    color: #ffffff;
    font-family: "Open Sans";
    font-size: 12px;
    font-weight: 300;
  line-height: 12px;
}

.number {
    opacity: 0.54;
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 400;
    display: inline;
}

.fa-comment {
    color: #b59f5b;
    font-size: 14px;
    font-family: "Font Awesome";
}

.border {
    width: 465px;
    min-height: 135px;
    border: 3px solid #b59f5b;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600&family=Open+Sans:wght@600;700&family=Raleway:wght@300&display=swap" rel="stylesheet">

<div class="groups_line">
            <div class="first_group line">
                <div class="first-group-line border">
                    <p class="group_line heading_block">beauty   health  life</p>
                    <p class="group_line text">FROM GRAPEFRUIT TO LEMONS TO ORANGES, CITRUS DOES YOU GOOD! Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis nemo ducimus alias necessitatibus doloribus? Harum libero reiciendis ipsam vitae, corrupti quos molestias quis, provident iste nam officia. Odio, voluptatum saepe!</p>
                    <div class="wrapper_foot">
                        <p class="group-line data"> June 14, 2015</p>
                        <div class="group-line comment_logo">
                            <i class="fas fa-comment"></i>
                            <p class="group-line number">24</p>
                        </div>
                    </div>
                </div>
            </div>
        <div class="second_group line">
            <div class="second-group-line border">
                <p class="group_line heading_block">health</p>
                <p class="group_line text">5 Tips To Supercharge Your 
Motivation</p>
                <div class="wrapper_foot">
                    <p class="group-line data"> June 14, 2015</p>
                    <div class="group-line comment_logo">
                        <i class="fas fa-comment"></i>
                        <p class="group-line number">24</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="third_group line">
            <div class="third-group-line border">
                <p class="group_line heading_block">Beauty</p>
                <p class="group_line text">To Keep Makeup Looking Fresh Take A Powder</p>
                <div class="wrapper_foot">
                    <p class="group-line data"> June 14, 2015</p>
                    <div class="group-line comment_logo">
                        <i class="fas fa-comment"></i>
                        <p class="group-line number">24</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

发生这种情况是因为您在 .line class 上设置了 flex 显示。

删除 .lines class 上的 display: flex; justify-content: center 并将子元素放在 lines 的中心 div,

请将 display: block; margin: 0 auto; 添加到 borders class。

我已附上更改。

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: sans-serif;
}

.groups_line {
    margin: 0 auto;
    width: 1565px;
    padding-right: 40px;
    padding-left: 40px;
    display: flex;
}

.line {
    width: 520px;
    min-height: fit-content;
    margin-right: 4px;
    padding-top: 170px;
    padding-bottom: 55px;
  background-size: cover;
}

.line:last-child {
    margin-right: 0px;
}

.first_group {
    background-image: url(https://i.postimg.cc/X7K9PsbD/13-2x.png);
}

.second_group {
    background-image: url(https://i.postimg.cc/hGvxfg7H/kaboompics-com-Woman-preparing-a-lunch-on-the-kitchen-table.png);
}

.third_group {
    background-image: url(https://i.postimg.cc/s2GXk2WD/photo-1453822858805-7c095c06011e.png);
}

.wrapper_foot {
    display: flex;
    justify-content: space-between;
    padding: 18px 15px 10px 15px;
}

.heading_block {
    font-family: "Open Sans";
    font-size: 14px;
  font-weight: 800;
    text-transform: uppercase;
    color: #b59f5b;
    margin: 20px 10px 15px 10px;
    text-align: center;
  
}

.text {
    color: #ffffff;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    margin-left: 55px;
    margin-right: 55px;
    text-align: center;
  line-height: 24px;
}

.data {
    opacity: 0.54;
    color: #ffffff;
    font-family: "Open Sans";
    font-size: 12px;
    font-weight: 300;
  line-height: 12px;
}

.number {
    opacity: 0.54;
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 400;
    display: inline;
}

.fa-comment {
    color: #b59f5b;
    font-size: 14px;
    font-family: "Font Awesome";
}

.border {
    width: 465px;
    min-height: 135px;
    border: 3px solid #b59f5b;
    display: block;
    margin: 0 auto;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600&family=Open+Sans:wght@600;700&family=Raleway:wght@300&display=swap" rel="stylesheet">

<div class="groups_line">
            <div class="first_group line">
                <div class="first-group-line border">
                    <p class="group_line heading_block">beauty   health  life</p>
                    <p class="group_line text">FROM GRAPEFRUIT TO LEMONS TO ORANGES, CITRUS DOES YOU GOOD! Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis nemo ducimus alias necessitatibus doloribus? Harum libero reiciendis ipsam vitae, corrupti quos molestias quis, provident iste nam officia. Odio, voluptatum saepe!</p>
                    <div class="wrapper_foot">
                        <p class="group-line data"> June 14, 2015</p>
                        <div class="group-line comment_logo">
                            <i class="fas fa-comment"></i>
                            <p class="group-line number">24</p>
                        </div>
                    </div>
                </div>
            </div>
        <div class="second_group line">
            <div class="second-group-line border">
                <p class="group_line heading_block">health</p>
                <p class="group_line text">5 Tips To Supercharge Your 
Motivation</p>
                <div class="wrapper_foot">
                    <p class="group-line data"> June 14, 2015</p>
                    <div class="group-line comment_logo">
                        <i class="fas fa-comment"></i>
                        <p class="group-line number">24</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="third_group line">
            <div class="third-group-line border">
                <p class="group_line heading_block">Beauty</p>
                <p class="group_line text">To Keep Makeup Looking Fresh Take A Powder</p>
                <div class="wrapper_foot">
                    <p class="group-line data"> June 14, 2015</p>
                    <div class="group-line comment_logo">
                        <i class="fas fa-comment"></i>
                        <p class="group-line number">24</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

为什么当其中一个积木变大时，我所有的积木都会增加？

Why do all my blocks increase when one of them becomes bigger?

html

css

parent-child