在单独的div中对齐元素[重复]

Posted 2023-03-05

【中文标题】在单独的div中对齐元素[重复]

【英文标题】：Align elements in separate divs [duplicate]

【发布时间】：2019-01-13 20:07:16

【问题描述】：

使用 Bootstrap 4，我创建了一个 card-deck 和两个 cards。尽管两个cards 的高度相同，但由于其他元素的文本长度不同，元素不在同一个位置。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-deck">
  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <a>
        <img class="card-img" src="banner.FeatureImage0.Url"  style="width:200px; height: 132.531; float: right; margin-left:10px;">
      </a>
      <h5 class="card-title">Get to Know...FirstName LastName</h5>
      <p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President.</p>
      <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>

  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <a>
        <img class="card-img" src="banner.FeatureImage0.Url"  style="width:200px; height: 132.531; float: right; margin-left:10px;">
      </a>
      <h5 class="card-title">Questions are more important than answers - August ethics message</h5>
      <p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
      <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>

</div>

如何确保我的“阅读更多”按钮相互对齐？

【问题讨论】：

你可以给卡片一个min-height，然后让阅读更多按钮出现在卡片的底部。

【参考方案1】：

您可以使用d-flex flex-column 制作卡片主体的flex-direction 列，然后使用mt-auto (margin-top:auto) 将按钮推到每张卡片的底部...

<div class="container">
    <div class="card-deck">
        <div class="card" style="margin-top: 0px">
            <div class="card-body d-flex flex-column align-items-start">
                <a>
                    <img class="card-img" src="banner.FeatureImage0.Url"  style="width:200px; height: 132.531; float: right; margin-left:10px;">
                </a>
                <h5 class="card-title">Get to Know...FirstName LastName</h5>
                <p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President.</p>
                <a class="btn btn-primary mt-auto" style="color:white !important;">Read More</a>
            </div>
        </div>
        <div class="card" style="margin-top: 0px">
            <div class="card-body d-flex flex-column align-items-start">
                <a>
                    <img class="card-img" src="banner.FeatureImage0.Url"  style="width:200px; height: 132.531; float: right; margin-left:10px;">
                </a>
                <h5 class="card-title">Questions are more important than answers - August ethics message</h5>
                <p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
                <a class="btn btn-primary mt-auto" style="color:white !important;">Read More</a>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/nxTqqN1uWC

此解决方案不需要更改卡片的结构，因为所有内容都应保留在 card-body 中。

【参考方案2】：

您的卡片内容高度不同。如果您看到，其中一个标题在一个小窗口中占据了 2 行，而另一个则与之相比。有多种方法可以解决这个问题。一种方法是将宽度分配给标题，然后为溢出添加省略号。同样，您可以为身体执行此操作。控制按钮前所有内容的高度后，您的内容将对齐。

省略号：

p 
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
  margin: 0;

【参考方案3】：

卡片已经有一个 flex，所以你可能需要添加一个“文本容器”来填充底部（按钮高度加上一些额外的边距：比如 2.5rem）并使按钮绝对定位到卡片主体底部（相同的距离/size 作为卡体边距：1.5rem)

.card-body 
  position: relative;


.card-body .emp-container 
  padding-bottom: 2.5rem;


.card-body .btn 
  position: absolute;
  bottom: 1.25rem;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-deck">
  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <div class="emp-container">
        <a>
          <img class="card-img" src="https://picsum.photos/200/300"  style="width:200px; height: 132.531; float: right; margin-left:10px;">
        </a>
        <h5 class="card-title">Get to Know...FirstName LastName</h5>
        <p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President., Community Relations and Social Responsibility Officer, Executive Vice President., Community Relations and Social
          Responsibility Officer, Executive Vice President.</p>
      </div> <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>
  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <div class="emp-container">
        <a>
          <img class="card-img" src="https://picsum.photos/200/300"  style="width:200px; height: 132.531; float: right; margin-left:10px;">
        </a>
        <h5 class="card-title">Questions are more important than answers - August ethics message</h5>
        <p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
      </div>
      <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>
</div>