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

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。

添加以下独立 .sub-offer class.

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

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

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

Answer 2

我解决了我的问题。为了给所有三列 相同的宽度 我使用了@tacoshy 在评论中推荐的内容：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;}。下面是一个工作示例。不过，由于我刚开始帮助 Whosebug 上的人或一般的 Whosebug，我确信我没有做对的事情。例如，为不同的问题提供解决方案或解决您不希望出现的问题。如果您需要我更改的列表，可以在此处查看：added } for sub-offer removed 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>

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

How to align elements in three columns, even when resizing

html

css

sass