如何对齐两张不同卡片中的元素

时间：2019-03-14 18:25:08

标签： css alignment vertical-alignment

我知道这个论坛上已经多次询问过这个问题，但是我阅读了有关它的每个主题，并尝试了许多建议的解决方案，但仍然无法使其适合我的情况。

这里是这种情况。我有这个内容卡网格，但是根据内容的长度或是否使用了卡中的每个元素，卡的高度都不同。因此，元素不会从一张卡对齐到另一张卡。我想编辑我的代码，以便每个元素的顶部从相对高度开始，以便它们对齐。

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>

1 个答案:

答案 0 :(得分：0)

这是您想要的：

  • 所有事件标题对齐
  • 所有标签对齐
  • 按钮始终位于底部

您需要什么

  • 所有张卡片具有相同的高度

  • 卡是flex column

为清楚起见，我将在您的CSS的末尾添加必要的CSS 。

.section__etudes-card > span > div {
  display: flex; /* Necessary for the cards to have the same height */
}
.etude-card {
  display: flex;  /* Necessary for the cards to have the same height */
  flex-direction: column;  /* To be able to push the childrens down */
  width: 100%;
}
.etude-card > :nth-child(3) {
  margin-top: auto; /* Will push the first tag down */
}
.etude-card__date:nth-last-child(3) {
  margin-top: auto; /* Will push everything starting with the date down */
}


.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;
}


/* The changes: */
.section__etudes-card > span > div {
  display: flex;
}
.etude-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.etude-card > :nth-child(3) {
  margin-top: auto;
}
.etude-card__date:nth-last-child(3) {
  margin-top: auto; 
}
<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>

相关问题
最新问题