Question

我正在为商场开发一个网站，我有一个由卡片制作的商店列表，其中包括带有名称和背景照片的标题，商店描述以及带有商店链接的页脚和分享按钮。

所有卡片的高度相同，带标题和背景图片的标题在px中具有固定的高度，页脚将位于卡片的底部。

到目前为止，我已经轻松搞定了，但这些描述让我疯狂，因为它们正在垂直居中，我希望它们位于标题之下。

为了更好地理解，我创建了一个小小的演示。

.container {
  width: 90%;
  min-width: 1000px;
  margin: 0 auto;
}
.row {
  display: flex;
}
.box-b {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 31.1%;
  margin: 0 1.1% 1.1%;
  border: 1px solid gray;

}
.box-header-b {
  width: 100%;
  display: flex;
  padding: 16px;
  height: 192px;
  background-size: contain;
  border: 1px solid red;
}
.box-title {
  align-self: flex-end;
}
p {

  background-color: red;
  align-self: flex-start;
}
.box-b-actions {
  width: 100%;
  padding: 16px;
  border: 1px solid #000;
  align-self: flex-end;
}

  <div class="container">
    <div class="row">
      <div class="box-b">
        <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)">
          <h2 class="box-title">John</h2>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis, ipsum at enim voluptas quaerat unde quo sunt odio?</p>
        <div class="box-b-actions">
          <a href="">Link to home</a>
        </div>
      </div>
      <div class="box-b">
        <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)">
          <h2 class="box-title">Peter</h2>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis, ipsum at enim voluptas quaerat unde quo sunt odio? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sint iste pariatur cupiditate aliquid nemo reprehenderit unde veritatis est, laboriosam assumenda fuga expedita nam optio porro ullam vitae deleniti culpa!</p>
        <div class="box-b-actions">
          <a href="">Link to home</a>
        </div>
      </div>
      <div class="box-b">
        <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)">
          <h2 class="box-title">James</h2>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis,</p>
        <div class="box-b-actions">
          <a href="">Link to home</a>
        </div>
      </div>
    </div>
  </div>

提前致谢并期待解决方案：）

Answer 1

这是怎么回事：

 .container {
   width: 90%;
   min-width: 1000px;
   margin: 0 auto;
 }
 
 .row {
   display: flex;
   flex-direction: row;
 }
 
 .box-b {
   display: flex;
   flex-direction: column;
   width: 31.1%;
   margin: 0 1.1% 1.1%;
   border: 1px solid gray;
 }
 
 .box-header-b {
   width: 100%;
   display: flex;
   padding: 16px;
   height: 192px;
   background-size: contain;
   border: 1px solid red;
   box-sizing:border-box;
 }
 
 .box-title {
   align-self: flex-end;
 }
 
 p {
   flex-grow:1;
   background-color: red;
   margin: 0;
 }
 
 .box-b-actions {
   box-sizing:border-box;
   width: 100%;
   padding: 16px;
   border: 1px solid #000;
   align-self: flex-end;
 }

<div class="container">
  <div class="row">
    <div class="box-b">
      <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)">
        <h2 class="box-title">John</h2>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis, ipsum at enim voluptas quaerat unde quo sunt odio?</p>
      <div class="box-b-actions">
        <a href="">Link to home</a>
      </div>
    </div>
    <div class="box-b">
      <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)">
        <h2 class="box-title">Peter</h2>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis, ipsum at enim voluptas quaerat unde quo sunt odio? Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Maxime sint iste pariatur cupiditate aliquid nemo reprehenderit unde veritatis est, laboriosam assumenda fuga expedita nam optio porro ullam vitae deleniti culpa!</p>
      <div class="box-b-actions">
        <a href="">Link to home</a>
      </div>
    </div>
    <div class="box-b">
      <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)">
        <h2 class="box-title">James</h2>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis,</p>
      <div class="box-b-actions">
        <a href="">Link to home</a>
      </div>
    </div>
  </div>
</div>

在具有底部对齐的页脚的相同高度的柔性盒中垂直对齐

1 个答案: