如何确保按钮在调整文本大小时保持相同的高度？答案

【问题标题】：How to make sure buttons stay at the same height while resizing text?如何确保按钮在调整文本大小时保持相同的高度？
【发布时间】：2017-01-16 16:37:48
【问题描述】：

如果窗口调整文本“自行推动”并且buttons 被下推。 buttons 到处都是。在为不同的视口调整窗口大小时，我希望它们始终位于同一个位置。

section {
  justify-content: center;
  flex-wrap: wrap;
  display: inline-flex;
  width: 100%;
}
section article {
  position: relative;
  background-color: white;
  width: 30%;
  margin: 1em;
}
section article p {
  max-width: 30em;
  color: black;
  font-size: 1em;
}
section article button {
  color: white;
  padding: 0.5em 0.5em;
  text-align: center;
  background-color: #F6861F;
}
/* Tablet size*/

@media screen and (max-width: 67em) {
  section article {
    width: 40%;
  }
  /* Mobile Size formulier.  */
  @media screen and (max-width: 40em) {
    section article {
      width: 95%;
    }

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


<section>
  <article>
    <p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae
      sapien ut libero venenatis faucibus.</p>
    <a href="">
      <button>Test</button>
    </a>
    <a href="">
      <button>Test</button>
    </a>
  </article>


  <article>

    <p>
      Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum
      nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id

    </p>
    <a>
      <button>Test</button>
    </a>
    <a>
      <button>Test</button>
    </a>
  </article>

  <article>

    <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum
      primis in faucibus orci luctus et</p>
    <a>
      <button>Test</button>
    </a>
    <a>
      <button>Test</button>
    </a>
  </article>

  <article>


    <p>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
      sem libero volutpat nibh, nec pellente</p>
    <button>Test</button>
    <button>Test</button>
  </article>


  <article>


    <p>Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus.
      Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh.</p>
    <a href="">
      <button>Test</button>
    </a>
    <a>
      <button>Test</button>
    </a>

  </article>

  <article>


    <p>Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut leo. Ut
      a nisl id ante tempus hendrerit. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue au</p>
    <a>
      <button>Test</button>
    </a>
    <a>
      <button>Test</button>
    </a>
  </article>






  </body>



  </html>

【问题讨论】：

标签： html css button text size

【解决方案1】：

您应该将按钮包装到某个容器中，我会使用这样的东西：

<article>
        <p>Long lorem ipsum text goes here...</p>
        <div class="actions">
            <a href="">
                <button>Test</button>
            </a>
            <a href="">
                <button>Test</button>
            </a>
        </div>
</article>
<article>....</article>

然后在你已经拥有的上面添加几行 css：

.actions {
        display: flex;
        align-self: flex-end;
    }
section article {
        position: relative;
        background-color: white;
        width: 30%;
        margin: 1em;

        /* added style */
        display: flex;
        flex-direction: column;
        flex-flow: inherit;
    }

对于非常大的显示器，我会删除一行 css：

section article p {
        /* -- if You whant to make some limits make it on all section     or at least on article */
        /*max-width: 30em;*/ 
        color: black;
        font-size: 1em;
    }

【讨论】：