我们有一组结果应该显示在三列中。使用
Flexbox
我们能够获得我们想要完成的大部分工作(即,所有人都有相同的高度,在顶部适当对齐(参见
flex__top
,并在底部正确对齐(请参见
flex__bottom
)
然而,我们遇到了一个问题,当
屈底
元素的高度与其他元素不同,对齐已关闭。
我们如何对齐所有的列,使其具有相同的高度?
屈底
节从相同位置开始?
目标
:
-
确保所有列的高度相同
-
对于里面的每个项目
屈底
应该有一个
border-top
这与所有其他人是一致的。
问题
期望输出
这里提供了代码笔,以防在内联代码段中难以复制。
/* Columns */
@media screen and (min-width: 320px) {
.col-m-12 {
width: 100%;
padding: 16px;
display: flex;
justify-content: center;
align-items: stretch;
}
}
@media screen and (min-width: 768px) {
.col-t-4 {
width: calc(33% - 48px);
}
}
/* Flex */
.flex__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
flex-direction: row;
flex: 0 1 auto;
}
.flex__link {
display: flex;
align-items: stretch;
justify-content: space-between;
flex-direction: column;
background-color: #eee;
}
.flex__top {
padding: 16px;
}
.flex__bottom {
border-top: 1px solid;
}
/* Image */
img {
height: auto;
display: block;
width: 100%;
}
/* Lists */
ul {
list-style: none;
}
ul>li {
display: inline-flex;
border: 1px solid;
margin: 4px;
padding: 4px;
}
/* Link */
a {
text-decoration: none;
color: #000;
}
<div class="flex__wrapper">
<div class="col-m-12 col-t-4">
<a class="flex__link" href="#">
<div class="flex__top">
<img src="https://placeimg.com/640/480/arch" class="flex__img">
<h2 class="flex__h2">Check back tomorrow;</h2>
<p>I will see if the book has arrived.</p>
</div>
<div class="flex__bottom">
<ul>
<li>Learn More</li>
</ul>
</div>
</a>
</div>
<div class="col-m-12 col-t-4">
<a class="flex__link" href="#">
<div class="flex__top">
<img src="https://placeimg.com/640/480/nature" class="flex__img">
<h2 class="flex__h2">I am happy</h2>
<p>I am never at home on Sundays.</p>
</div>
<div class="flex__bottom">
<ul>
<li>Learn More</li>
<li>Progressively matrix</li>
<li>Uniquely build extensible</li>
<li>seamless customer</li>
</ul>
</div>
</a>
</div>
<div class="col-m-12 col-t-4">
<a class="flex__link" href="#">
<div class="flex__top">
<img src="https://placeimg.com/640/480/people" class="flex__img">
<h2 class="flex__h2">Malls are great places to shop</h2>
<p>I can find everything I need under one roof.</p>
</div>
<div class="flex__bottom">
<ul>
<li>maximizing</li>
<li>Monotonectally whiteboard</li>
</ul>
</div>
</a>
</div>
<div class="col-m-12 col-t-4">
<a class="flex__link" href="#">
<div class="flex__top">
<img src="https://placeimg.com/640/480/tech" class="flex__img">
<h2 class="flex__h2">I want to buy</h2>
<p>but know it wonât suit me.</p>
</div>
<div class="flex__bottom">
<ul>
<li>Learn More</li>
<li>task error-free</li>
<li>Energistically</li>
<li>practices</li>
<li>ethical methodologies</li>
<li>task error-free</li>
</ul>
</div>
</a>
</div>
<div class="col-m-12 col-t-4">
<a class="flex__link" href="#">
<div class="flex__top">
<img src="https://placeimg.com/640/480/animals" class="flex__img">
<h2 class="flex__h2">Last Friday in three week</h2>
<p>Blue worm shake hands with a legless lizard.</p>
</div>
<div class="flex__bottom">
<ul>
<li>Learn More</li>
<li>incubate</li>
</ul>
</div>
</a>
</div>
<div class="col-m-12 col-t-4">
<a class="flex__link" href="#">
<div class="flex__top">
<img src="https://placeimg.com/640/480/animals/grayscale" class="flex__img">
<h2 class="flex__h2">She advised</h2>
<p>him to come back at once.</p>
</div>
<div class="flex__bottom">
<ul>
<li>Learn More</li>
<li>Seamlessly</li>
<li>build excellent</li>
</ul>
</div>
</a>
</div>
</div>
