英文:
Same columns height in flex model is not being applied
问题
我需要创建一个1x4的布局，当宽度小于600px时变为2x2的布局：
.group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.block {
flex: 25%;
}
@media only screen and (max-width: 600px) {
.block {
flex: 50%;
}
}
.main, .block {
flex-grow: 1;
}
.text {
flex-grow: 1;
border: 1px solid red;
padding: 10px;
}
我需要这些列的高度相同，但它们目前不相同。
我需要将border类应用于text div，并使它们都具有相同的高度。
如何实现这一点？
英文:
I need to create a 1x4 layout that changes to 2x2 layout when width is less than 600px:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.block {
flex: 25%;
}
@media only screen and (max-width: 600px) {
.block {
flex: 50%;
}
}
.main, .block {
flex-grow: 1;
}
.text {
flex-grow: 1;
border: 1px solid red;
padding: 10px;
}
<!-- language: lang-html -->
<div class="group">
<div class="block">
<div class="main">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="block">
<div class="main">
<div class="text">Lorem ipsum.</div>
</div>
</div>
<div class="block">
<div class="main">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="block">
<div class="main">
<div class="text">Lorem ipsum dolor sit amet.</div>
</div>
</div>
</div>
<!-- end snippet -->
I need the columns to be of the same height but they are not.
I need border class to be applied text div and all to be same height.
How to do this?
答案1
得分: 1
你可以使用一个网格布局。
.group {
display: grid;
grid-template: 1fr / repeat(4, 1fr);
row-gap: 20px; /* 根据 .text 中的内边距进行调整 */
}
.block,
.main {
height: 100%;
}
@media only screen and (max-width: 600px) {
.group {
grid-template: 1fr 1fr / 1fr 1fr;
}
}
.text {
border: 1px solid red;
height: 100%;
padding: 10px;
}
<div class="group">
<div class="block">
<div class="main">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="block">
<div class="main">
<div class="text">Lorem ipsum.</div>
</div>
</div>
<div class="block">
<div class="main">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="block">
<div class="main">
<div class="text">Lorem ipsum dolor sit amet.</div>
</div>
</div>
</div>
英文:
You could use a grid
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.group {
display: grid;
grid-template: 1fr / repeat(4, 1fr);
row-gap: 20px; /* Adjust for padding in .text */
}
.block,
.main {
height: 100%;
}
@media only screen and (max-width: 600px) {
.group {
grid-template: 1fr 1fr / 1fr 1fr;
}
}
.text {
border: 1px solid red;
height: 100%;
padding: 10px;
}
<!-- language: lang-html -->
<div class="group">
<div class="block">
<div class="main">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="block">
<div class="main">
<div class="text">Lorem ipsum.</div>
</div>
</div>
<div class="block">
<div class="main">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="block">
<div class="main">
<div class="text">Lorem ipsum dolor sit amet.</div>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论