【发布时间】：2019-03-20 16:01:00
【问题描述】：
我知道这个论坛已经被问过很多次了，但是我阅读了关于它的每个主题并尝试了许多建议的解决方案，但我仍然无法让它适用于我自己的情况。
这是这个案例。我有这个内容卡片网格，但根据内容的长度或是否使用卡片中的每个元素，卡片有不同的高度。因此，元素没有从一张卡对齐到另一张卡。我想编辑我的代码，使每个元素的顶部从相对高度开始，以便它们对齐。
Codepen：https://codepen.io/louischausse/pen/VRQxgB
我希望每个子 div 的顶部相互对齐
感谢您的帮助
.section__etudes-card > span, [gr-grid~=row--block], .section__featured-article .hs_cos_wrapper .widget-module ul {
position: relative;
display: -ms-flexbox;
-js-display: flex;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin-left: -15px;
margin-right: -15px;
align-items: stretch;}
.section__etudes-card > span > div, [gr-grid=block], .section__featured-article .hs_cos_wrapper .widget-module ul li {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
margin-top: 30px; }
.section__etudes-card {
margin-top: 1.875rem;
margin-bottom: 1.875rem; }
.section__etudes-card > span > div {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%; }
@media (min-width: 48em) {
.section__etudes-card > span > div {
-ms-flex-preferred-size: 33%;
flex-basis: 33%;
max-width: 33%; } }
@media (min-width: 64em) {
.section__etudes-card > span > div {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%; } }
.section__etudes-card > span > div:empty {
display: none; }
.etude-card {
display: block;
text-align: center;
margin-bottom: 0.9375rem;
text-decoration: none; }
@media (min-width: 64em) {
.etude-card:hover [class*="btn--"] {
/*transform: scale(1.05);*/
color: #fff;
background-color: #e98815;
border-color: #e98815; } }
.etude-card .etude-card__title {
margin-top: 0.9375rem;
margin-bottom: 0.9375rem;
font-weight: bold;
color: #333333;
line-height: 1.1; }
.etude-card .etude-card__date {
font-size: 0.8125em;
margin-top: 0.625rem;
margin-bottom: 0.625rem; }
.etude-card .etude-card__ufc {
color: #FFFFFF;
font-size: .75em;
padding: 3px 8px;
background-color: #e98815;
width: 75px;
margin: 0 auto;
border: 1px solid #e98815;}
.etude-card .etude-card__cost {
color: #e98815;
font-size: .75em;
padding: 3px 8px;
width: 75px;
margin: 0 auto;
border: 1px solid #e98815;}
.etude-card [class*="btn--"] {
padding-left: .5em;
padding-right: .5em;
text-transform: none; }
.etude-card img {
width: 100%;
max-width: 215px;
margin-left: auto;
margin-right: auto; }
.etude-card__ufc:empty {
display: none; }
.etude-card__cost:empty {
display: none; }
.btn--primary {
padding: 10px 35px;
font-size: 16px;
border-radius: 5px;
display: inline-block;
position: relative;
z-index: 0;
text-decoration: none;
text-transform: none !important;
color: #FFFFFF;
background-color: #e98815;
border: 2px solid transparent;
}
.btn--primary:hover {
background: #ffffff !important;
color: #e98815 !important;
border: 2px solid #e98815 !important;
}<section class="section__etudes-card">
<span id="hs_cos_wrapper_Ressource_center_element" class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" style="" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><div id="hs_cos_wrapper_widget_1552502647360" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<a href="https://codepen.io/" class="etude-card">
<img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
<div class="etude-card__title">
THIS IS EVENT TITLE
</div>
<div class="etude-card__ufc">TAG 1</div>
<div class="etude-card__date">
Place
</div>
<div class="etude-card__date">
Time
</div>
<span class="btn--primary">
See details
</span>
</a>
</div>
<div id="hs_cos_wrapper_widget_1552496573108" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<a href="https://codepen.io/" class="etude-card">
<img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
<div class="etude-card__title">
THIS A VERY MUCH LONGER EVENT TITLE CAUSING PROBLEMS
</div>
<div class="etude-card__ufc">TAG 1</div>
<div class="etude-card__cost">TAG 2</div>
<div class="etude-card__date">
Place
</div>
<div class="etude-card__date">
Time
</div>
<span class="btn--primary">
See details
</span>
</a>
</div>
<div id="hs_cos_wrapper_widget_1551887999614" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><!-- custom widget definition not found --></div>
<div id="hs_cos_wrapper_widget_1551888011972" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><!-- custom widget definition not found --></div>
<div id="hs_cos_wrapper_widget_1551888047237" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<a href="https://codepen.io/" class="etude-card">
<img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
<div class="etude-card__title">
THIS IS EVENT TITLE
</div>
<div class="etude-card__cost">TAG 2</div>
<div class="etude-card__date">
Place
</div>
<div class="etude-card__date">
Time
</div>
<span class="btn--primary">
See details
</span>
</a>
</div>
</section> 【问题讨论】：
-
你可以使用更多的弹性。
.section__etudes-card > span > div {display:flex;}（那么它们都具有相同的高度），.etude-card {display: flex; flex-direction: column;}，然后是.etude-card .etude-card__title {margin-bottom: auto}（因此它将标题之后的所有内容都推下） -
@AmauryHanser 感谢您的帮助...我完全按照您所说的进行了尝试，但没有成功...也许我没有按正确的顺序排列代码。我能做错什么？
-
你到底想要对齐吗？可能我没听懂。
-
我尝试做的事情在这个问题中得到了很好的解释：stackoverflow.com/questions/48568568/…再次感谢您的帮助@AmauryHanser
-
上面的代码转换为 imgur.com/a/UAJaxhc 这就是你要找的吗？
标签： css alignment vertical-alignment