即使在调整大小时如何对齐三列中的元素

Question

期望的结果：我有三列。我需要它们都具有相同的宽度，并且文本和按钮在所有三个中都处于同一水平。

问题：根据字数，当文本调整大小时，列会变宽，按钮开始跳跃，并且所有三个文本都在不同的点上调整大小。我需要防止这种情况。我怎样才能做到这一点？

HTML：

<section class="sub-offer">
      <div class="offer-container">
        <div class="offer-up">
          <h2>Lorem, ipsum.</h2>
          <img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
        </div>
        <div class="offer-down">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
            rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
            quis!
          </p>
        </div>
        <div class="more-btn">
          <a href="#">Lorem, ipsum.</a>
        </div>
      </div>

      <div class="offer-container">
        <div class="offer-up">
          <h2>Lorem, ipsum.</h2>
          <img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
        </div>
        <div class="offer-down">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
            perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
            incidunt odio?
          </p>
        </div>
        <div class="more-btn">
          <a href="#">Lorem, ipsum.</a>
        </div>
      </div>

      <div class="offer-container">
        <div class="offer-up">
          <h2>Lorem, ipsum.</h2>
          <img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
        </div>
        <div class="offer-down">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
            vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
            ullam quod porro atque error?
          </p>
        </div>
        <div class="more-btn">
          <a href="#">Lorem, ipsum.</a>
        </div>
      </div>
    </section>

CSS：

.sub-offer {
  text-align: center;
  display: flex;
  position: relative;

  .offer-container {
    background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
  }

  h2 {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4.3em;
    width: 33%;
    text-align: center;
  }

  p {
    font-size: 12px;
    margin-top: 2em;
    padding: 0 0.5em 0 0.5em;
    font-family: 'Montserrat', sans-serif;
  }

  a {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    background: white;
    margin: 3em 0 2.5em 0;
    padding: 0.5em;
    text-decoration: none;
    color: black;

    &:hover {
      background: #e5e5e5;
    }
  }
}

它们现在的样子：

Answer 1

您可以添加媒体查询以在屏幕调整大小时更改flex-direction。

1. 添加以下独立 .sub-offer 类。

@media(max-width: 600px){
  flex-direction: column;
}

1. 在h2 元素中添加以下内容。

@media(max-width: 600px){
  width: 100%;
}

Answer 2

我解决了我的问题。为了使所有三列具有相同的宽度，我使用了 @tacoshy 在 cmets 中推荐的内容：section.sub-offer { display: flex; } .offer-container { width: calc(100% / 3); }

为了对齐所有三个按钮，尽管让所有按钮都保持响应，我已将我的按钮包装到一个 div 中并使用了以下 css：

.more-btn {
    display: flex;
    align-self: center;
    margin-top: auto;
  }

Answer 3

我不是一个很好的开发者，但我可以试一试。当我想让事情完美排列时，我会使用网格，所以我尝试将其添加到 .offer-container 中，就像 .offer-container {display: grid; grid-template-rows: 1fr 1fr 1fr;} 一样。下面是一个工作示例。不过，由于我是新来帮助人们使用 StackOverflow 或真正的 StackOverflow，所以我确信我没有做正确的事情。例如，为不同的问题提供解决方案或修复您不想要的问题。如果您需要我所做更改的列表，可以在此处查看：added } for sub-offerremoved extra closing bracket on a{}separated &:hover to a:hover{}made <p> text white。如果您的问题尚未得到解决，我希望这是您正在寻找的解决方案。

.sub-offer {
    text-align: center;
    display: flex;
    position: relative;
    width:100px
}

.offer-container {
    background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
}

h2 {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4.3em;
    width: 33%;
    text-align: center;
}

p {
    font-size: 12px;
    margin-top: 2em;
    padding: 0 0.5em 0 0.5em;
    font-family: 'Montserrat', sans-serif;
    color: white;
}

a {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    background: white;
    margin: 3em 0 2.5em 0;
    padding: 0.5em;
    text-decoration: none;
    color: black;
}

a:hover {
    background: #e5e5e5;
}

<section class="sub-offer">
  <div class="offer-container">
    <div class="offer-up">
      <h2>Lorem, ipsum.</h2>
      <img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
    </div>
    <div class="offer-down">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
        rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
        quis!
      </p>
    </div>
    <div class="more-btn">
      <a href="#">Lorem, ipsum.</a>
    </div>
  </div>

  <div class="offer-container">
    <div class="offer-up">
      <h2>Lorem, ipsum.</h2>
      <img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
    </div>
    <div class="offer-down">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
        perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
        incidunt odio?
      </p>
    </div>
    <div class="more-btn">
      <a href="#">Lorem, ipsum.</a>
    </div>
  </div>

  <div class="offer-container">
    <div class="offer-up">
      <h2>Lorem, ipsum.</h2>
      <img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
    </div>
    <div class="offer-down">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
        vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
        ullam quod porro atque error?
      </p>
    </div>
    <div class="more-btn">
      <a href="#">Lorem, ipsum.</a>
    </div>
  </div>
</section>