无论链接中的文本/内容如何，在移动中堆叠时，链接保持相同的高度。

Question

我有一行链接(引导)，在桌面上，它们在屏幕上的列中，但在移动中，它们是堆栈的，这就是我想要的。现在，它们的高度为100%，无论链接中的内容如何，桌面上的高度都是相同的。我的问题是如何在移动/堆叠布局中达到相同的高度？

HTML：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <a class="link equal-height" href="#">
        <div>
          <p class="link-text">
           ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate facere illum, mollitia nam odit provident repellendus voluptas? A accusamus accusantium ad adipisci aliquam culpa debitis dolore doloremque ea eaque eos eum.
          </p>
        </div>
      </a>
    </div>
    <div class="col-md-4">
         <a class="link equal-height" href="#">
        <div><p class="link-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, doloribus.</p></div>
      </a>
    </div>
    <div class="col-md-4">
      <a class="link equal-height" href="#">
        <div><p class="link-text"> Link Three</p></div>
      </a>
    </div>
  </div>

css：

.link{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 10px 15px;
 }

.equal-heights{
height:100%
}

Answer 1

你可以用一点js来实现这一点。

​

var maxHeight = 0;

$(".link").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(".link").height(maxHeight);

ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  margin: 0 auto;
}

li {
  list-style: none;
  padding: .5rem 2rem;
  background: DarkOrchid;
  color: #fff;
  margin: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
  <li class="link">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet cumque ut nulla aliquid assumenda eos et est quis, impedit saepe pariatur eligendi iste, reiciendis odio doloremque eveniet quod distinctio molestias?</li>
  <li class="link">link</li>
  <li class="link">link</li>
  <li class="link">link</li>
  <li class="link">link</li>
</ul>

​

Answer 2

您可以用grid重写布局，并使用1fr调整大小。

POC：

​

.container {
display: grid;
grid-template-rows: 1fr 1fr 1fr
}

a {
display: block;
margin: 10px;
padding: 10px;
border: solid;
}

<div class="container">
  <a>ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate facere illum, mollitia nam odit provident repellendus voluptas? A accusamus accusantium ad adipisci aliquam culpa debitis dolore doloremque ea eaque eos eum.</a>
  <a>abc</a>
  <a>ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate facere illum</a>
</div>

​

更多信息：https://css-tricks.com/snippets/css/complete-guide-grid/