Question

我正在尝试为下面带有标题和按钮的部分设置样式，并且无论浏览器的大小如何，都希望按钮保持完全一致（除非在移动设备上堆叠）。由于一个标题中的文本比另一个标题中的文本更多，因此，当我更改屏幕尺寸时，某些标题会从一行变为需要使用两行，从而迫使该按钮在页面上移至较低位置，而另一按钮停留在该位置。

我的物品放在弹性包装盒中，但是有办法强迫他们保持一致吗？

-

编辑：

我最近尝试过的操作是删除按钮并将它们放在下面的单独部分中。

我还通过定位新的部分ID尝试了此解决方案here，但没有成功。

这是我遇到问题的原始代码。

/* 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;添加到按钮。这将迫使它们进入flexbox的底部。

由于没有代码，因此很难知道此解决方案是否可以正常工作，并对代码进行一些假设。

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

对您的元素执行此操作

显示：inline-block;

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

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

如何迫使物品保持原状

-

5 个答案: