如何强制项目保持一致

Question

我正在尝试使用标题和下方的按钮来设置部分的样式，并希望无论浏览器大小如何，按钮都能完美地保持一致（除非在移动设备上它们会堆叠）。 由于一个标题中的文本比另一个标题多，当我更改屏幕大小时，一些标题从一行变为需要使用两行，迫使按钮在页面上降低，而另一个按钮保持不变。

我有弹性盒子里的项目，但有没有办法强迫它们保持一致？

-

编辑：

我最近尝试的是删除按钮并将它们放在下面自己的部分中。

我也尝试了这个解决方案here，通过定位新的部分 id，没有成功。

这是我有问题的原始代码。

/* Section: Clients */

#clients .items {
  display: flex;
}

#clients .items img {
  display: block;
  position: center;
  margin: auto;
  width: 50%;
}

#clients .cr {
  position: relative;
  min-width: 29%;
  max-width: 30%;
  height: auto;
  text-align: center;
  padding-top: 0px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: 30px;
}

#clients .cr-last {
  position: relative;
  min-width: 29%;
  max-width: 30%;
  height: auto;
  text-align: center;
  padding-top: 0px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: 30px;
}

#clients .client-r {
  margin-right: 50px;
}

#clients .cr-btn {
  background-color: #4C9FCF;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

<!-- Section: Client Resources -->
<section id="clients" class="py-1">
  <div class="container">
    <h2 class="m-heading text-center">
      <span id="client-r" class="text-primary">Client</span> Resources
    </h2>
    <div class="items py-1">
      <div class="cr">
        <h2>
          TD Ameritrade Access
          <p></p>
        </h2>
        <button class="cr-btn">LOGIN</button>
      </div>
      <div class="cr">
        <h2>
          American Equity Access
          <p></p>
          <button class="cr-btn">LOGIN</button>
        </h2>
      </div>
      <div class="cr-last">
        <h2>
          American Equity Access
          <p></p>
          <button class="cr-btn">LOGIN</button>
        </h2>
      </div>
    </div>
  </div>
</section>

Answer 1

将margin-top: auto; 添加到按钮。这将迫使它们位于弹性框的底部。

由于没有代码，因此很难知道此解决方案是否能正常工作并对您的代码做出一些假设。

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  max-width: 500px;
}

.card {
  display: flex;
  flex-direction: column;
  width: 33.33333%;
  padding: 1rem;
}

.button {
  align-self: center;
  margin-top: auto; /* This is the magic. */
  padding: 1rem;
  background-color: skyblue;
}

<div class="row">

  <div class="card">
    <h2>Title Short</h2>
    <div class="button">Button</div>
  </div>

  <div class="card">
    <h2>Title Long Title Long Title Long</h2>
    <div class="button">Button</div>
  </div>

  <div class="card">
    <h2>Title Short</h2>
    <div class="button">Button</div>
  </div>

</div>

Answer 2

听起来您想要实现的目标可以使用flex-wrap 属性来完成。您需要将其值设置为 nowrap。

flex-wrap: nowrap

您可以在 MDN 的文档站点上阅读更多相关信息，可在以下链接中找到：

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

Answer 3

像

这样的内联块标签

<div>
<div id="div1" style="display: inline-block">Content1</div>
<div id="div2" style="display: inline-block">Content2</div>
</div>

通常应该强制两个 div 彼此相邻。如果不查看/尝试您的实际代码，就很难确切说明如何根据您的移动需求来执行此操作。有一个用于视口的元标记，如下所示，它处理了许多移动样式问题：

<meta name="viewport" content="width=device-width, initial-scale=1">

如果这不是您想要的结果，那么当屏幕太小时，您实际上希望 div 做什么？其中一个应该消失吗？此外，您的页面上可能有一些其他样式会导致额外的空间（边距、填充、其他 div 或其他元素），这可能会导致一些您意想不到的额外空白。

Answer 4

在您的元素上执行此操作，

显示：内联块；

这会将它们粘在一起并排成一行。

Answer 5

响应式解决方案

另一种解决方案是将flex-direction: row 和justify-content: center 添加到您的#clients .items 元素中，以使其相对于窗口宽度。

您的 #clients .items 元素 css 应该如下所示：

#clients .items {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

在您的#clients .cr 中添加width: 100% 并删除max-width: 30%。之后，您的元素 css 将如下所示：

#clients .cr {
  position: relative;
  /* min-width:29%; */
  width: 100%;
  height: auto;
  text-align: center;
  padding-top: 0px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: 30px;
}

您的元素也会响应。

我做了一个 JSFiddle：The JSFiddle example