html - CSS并排div，底部有固定链接

Question

我在并排放置三个 div 时遇到问题。

这三个 div 包含普通文本，但在底部也有一个链接。

<div id="parent">
    <h1>Description</h1>
    <div class="item">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
        <a href="#">Bottom</a>
    </div>
    <div class="item">
        <p>erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</p>
        <a href="#">Bottom</a>
    </div>
    <div class="item">
        <p>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
        <a href="#">Bottom</a>
    </div>
</div>

为了获得响应，元素是 inline-block，宽度为 32%。

div#parent {
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

div#parent div.item {
    display: inline-block;
    width: 32%;
    vertical-align: top;
}

现在的问题是，当我改变窗口大小时，元素的高度是不同的。我希望元素底部的链接位于同一位置，如下所示:
但实际看起来像这样:
我使用 JavaScript 将这些元素设置为相同的高度，但如何才能将这些链接设置到相同的位置？我知道这可以通过将元素设置为 position: relative; 并将 a 设置为 position: absolute; 来完成。 bottom: 0; 但随后 text-align: center; 不再起作用。

I made a JSFiddle for you to understand my problem.

希望你能帮助我。

Answer 1

Flex 可以很容易地做到这一点，但浏览器支持较少。另一种方法是使用 display: table，它有很好的支持(下至 IE8)，最后你会找到一个使用它的示例。

还有一种方法，从“行”的 Angular 思考，就像这样，没有绝对位置，没有脚本，并将链接放在底部, 全部居中。

更新

根据要求，为了提高响应速度，我添加了一个媒体查询。

在整个页面中运行该代码段并调整浏览器大小以查看其运行情况。

不过要注意，这仍然是一个“不使用 flex”的解决方案。

更新 2

添加了一个display: table

#parent {
    text-align: center;
    width: 90%;
    margin: 0 auto;
}
#parent div.item {
    display: inline-block;
    width: 32%;
    vertical-align: top;
    position: relative;
}
#parent div.item ~ div.item {
    margin-left: 1%;
}

#parent .contents a {
    display: none;
}

@media (max-width: 500px) {
  #parent div.item {
    display: block;
    width: 100%;
  }
  #parent .contents a {
    display: inline;
  }
  #parent .links a {
    display: none;
  }
}

<div id="parent">
    <div class="wrapper contents">
        <h1>Description</h1>
        <div class="item">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
            <a href="#">Bottom</a>
        </div>
        <div class="item">
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea duo rebum. Stet clita kasd gubergren, no sea duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</p>
            <a href="#">Bottom</a>
        </div>
        <div class="item">
            <p>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
            <a href="#">Bottom</a>
        </div>
    </div>
    <div class="wrapper links">
        <div class="item">
            <a href="#">Bottom</a>
        </div>
        <div class="item">
            <a href="#">Bottom</a>
        </div>
        <div class="item">
            <a href="#">Bottom</a>
        </div>
    </div>
</div>

表格版本

#parent {
    display: table;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}
#parent div.item {
    display: table-cell;
    width: 32%;
    vertical-align: top;
    position: relative;
    padding-bottom: 20px;
}
#parent div.item ~ div.item {
    padding-left: 1%;
}
#parent div.item a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
}
@media (max-width: 500px) {
  #parent {
    display: block;
  }
  #parent div.item {
    display: block;
    width: 100%;
  }
}

<div id="parent">
    <div class="wrapper">
        <h1>Description</h1>
        <div class="item">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
            <a href="#">Bottom</a>
        </div>
        <div class="item">
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea duo rebum. Stet clita kasd gubergren, no sea duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</p>
            <a href="#">Bottom</a>
        </div>
        <div class="item">
            <p>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
            <a href="#">Bottom</a>
        </div>
    </div>
</div>