如何在我的包含部分的 div class 中獲得與 flexbox 相同的高度？

Question

我想讓它在（“行”）內部的 div class 內具有相同的高度。 我已經閱讀了很多關於此的內容，但沒有什么對我有用。 由於我通常只是 web 設計的初學者，我不知道該怎么做。 如果您能幫助我，我將不勝感激！

HTML：

            <div class="row">
                <section id="sectionL">(Mouse pointer) Left-click on a picture to see the name!<br /><br />
                <article>
                    <footer>Recipes</footer><br /><br />
                    
                        <div class="polaroid">
                            <img class="myImg" src="img/Gruenkohl.jpg" alt="Kale with Kasseler, Sousages and Potatos" onclick="image(event)" width="100%" /><br />
                        </div><br />
                        
                        <br /><br /><br />
                        
                        <div class="polaroid">
                            <img class="myImg" src="img/Kirschtorte.jpg" alt="Cherry pie" onclick="image(event)" width="100%" /><br />
                        </div><br />
                        <br /><br />
                        
                        <br /><br /><br />
                        
                        <div class="polaroid">
                            <img class="myImg" src="img/Frankfurter.png" alt="Frankfurter Green Souce" onclick="image(event)" width="100%" /><br />
                        </div><br />
                        
                    </article>
                </section>
                
                    
                <section id="sectionR"><br /><br />
                    <article>
                        <footer>Tips</footer><br /><br />
                        Regional Markets:<br /><br />
                        <div class="polaroid">
                            <img class="myImg" src="img/Lidl.jpg" alt="Lidl Discounter" onclick="image(event)" width="100%" /><br />
                        </div>
                        
                        <div class="polaroid">
                            <img class="myImg" src="img/Norma.jpg" alt="Norma Discounter" onclick="image(event)" width="100%" /><br />
                        </div>
                        
                        <div class="polaroid">
                            <img class="myImg" src="img/REWE.jpg" alt="REWE Market" onclick="image(event)" width="100%" /><br />
                        </div><br />
                        
                        Local Restaurants (Darmstadt):<br /><br />
                        <div class="polaroid">
                            <img class="myImg" src="img/Nazar.png" alt="Nazar" onclick="image(event)" width="100%" /><br />
                        </div>
                        
                        <div class="polaroid">
                            <img class="myImg" src="img/Shirza.png" alt="Shirza" onclick="image(event)" width="100%" /><br />
                        </div>
                    </article>
                </section>
            </div>

            <div id="myModal" class="modal">
            <span class="close">&times;</span>
            <img class="modal-content" id="img01">
            <div id="caption"></div>
            </div>
            <script>
                var modal = document.getElementById("myModal");
                var modalImg = document.getElementById("img01");
                var captionText = document.getElementById("caption");
                function image(event) {
                    modal.style.display = "block";
                    modalImg.src = event.target.src;
                    captionText.innerHTML = event.target.alt;
                }
                var span = document.getElementsByClassName("close")[0];
                span.onclick = function () {
                    modal.style.display = "none";
            };
            </script>

CSS：

* {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    font-family: "Monteserat", Arial, sans-serif;
    scrollbar-width: thin !important;
    scrollbar-color: #8a2431ff #3d1016 !important;
    background-color: #3d1016;
}

header,
section,
aside,
footer {
    background-color: #651a24;
    padding: 25px;
}

header {
    width: 100%;
    margin: 0px 0px 0px 0px;
}

section {
    background-color: #3d1016;
    float: left;
    width: 100%;
    margin: 0px 0px 0px 0px;
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  float: left;
  width: 100%;
}

.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

#sectionL {
    float: left;
    width: 49.85%;
    margin: 0px 0px 0px 0px;
}

#sectionR {
    float: right;
    width: 49.85%;
    margin: 0px 0px 0px 0px;
}

section header,
section article {
    font-weight: normal;
    color: #f2f2f2;
    text-align: left;
    background-color: #651a24;
    border-radius: 10px;
    width: 100%;
    box-shadow: none;
    margin: 25px 0px 0px 0px;
    padding: 44px;
}

.polaroid {
    width: 100%;
    text-align: center;
    box-shadow: 0 5px 15px #000000;
    margin-bottom: 25px;
}

.container {
    text-align: left;
    padding: 10px 0px 10px 5px;
}

iframe{
    box-shadow: 0 5px 15px #000000;
}

.myImg {
  border-radius: 0px;
  cursor: pointer;
  transition: 0.3s;
}

.myImg:hover {
  opacity: 0.6;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
  background-color: transparent;
}

.modal-content,
#caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  background-color: transparent;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

Answer 1

點擊查看圖片

放

height: 100%;

到您的兩個article元素（在#sectionL和#sectionL ）。 如果不設置確切的高度值，則不能為這些元素設置相同的高度，因為它們是不同元素的子元素。 也請不要使用<br>作為縮進。 這是一個不好的做法。 改用邊距或填充。