[英]How to get the same height with flexbox in my div class containing sections?
我想让它在(“行”)内部的 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">×</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%;
}
}
放
height: 100%;
到您的两个article
元素(在#sectionL
和#sectionL
)。 如果不设置确切的高度值,则不能为这些元素设置相同的高度,因为它们是不同元素的子元素。 也请不要使用<br>
作为缩进。 这是一个不好的做法。 改用边距或填充。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.