html - 对齐列表并将文本推到底部

Question

我有一个包含标题、边框和简要说明的 3 个框列表。

目前它看起来像这样：

我想只使用 CSS 来对齐绿色边框并将所有单行标题推到底部。

内容和标题是动态的，因此可能会出现标题有 1、2、3 行的情况，但我总是希望行数较少的标题从底部开始，如下例所示。

我不能使用Javascript！

任何建议将不胜感激。

---

目前的代码结构是这样的：

HTML：

<section id="" class="boxes">
                <ul class="inline">
                    <li>
                        <article>
                            <h2>Mae hyn yn enghraifft prif llawer hwy</h2>
                            <p>
                                Mae llawer o bethau gwych cymaint yn mynd ymlaen yr haf hwn a, beth bynnag yw eich cynlluniau, nawr yw'r amser i fynd i'r afael a eich gwariant.
                            </p>
                            <a class="read-more" href="">Read more &gt;</a>
                        </article>
                    </li>

CSS：

ul.inline {
    display: inline-block;
    list-style-type: none;
    margin: 0 0 20px;
    padding: 0;
    width: 978px;
}

    ul.inline li {
        float: left;
        margin: 0 18px 0 0;
        padding: 0;
        width: 308px;
    }

        ul.inline li h2 {
            border-bottom: 5px solid #34750E;
            color: #34750E;
            font-size: 21px;
            margin: 0 0 10px;
            padding: 0 0 10px;
            position: relative;
        }

        ul.inline li a.read-more {
                color: #34750E !important;
        }

---

编辑：

在这里摆弄

Answer 1

更新

检查这个使用标记的更新小提琴，如您的问题：http: //jsfiddle.net/techfoobar/hmCuj/

解法逻辑基本保持不变。

---

检查这个小提琴：http: //jsfiddle.net/techfoobar/5hhdE/1/

HTML

<ul class="headings">
    <li>Heading #1. Heading #1. Heading #1. Heading #1. Heading #1. </li>
    <li>Heading #2</li>
    <li>Heading #3. Heading #3. Heading #3. Heading #3. Heading #3. Heading #3. Heading #3.</li>
</ul>
<ul class="matter">
    <li>Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. </li>
    <li>Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. </li>
    <li>Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. Matter. </li>
</ul>

CSS

ul.headings, ul.matter {
    list-style-type: none;
    vertical-align: bottom;
    white-space: nowrap;
}
ul.headings li {
    font-size:15px;
    font-weight: bold;
    border-bottom: 2px solid #888888;
    display: inline-block;
    padding: 5px 0;
    white-space: normal;
    width: 33.3%;
}
ul.matter li {
    width: 33.3%;
    display: inline-block;
    white-space: normal;
}

从这篇文章中得到了想法：如何将 LI 元素定位到 UL 列表的底部

Answer 2

我已经使用表格设置了一个示例。这是表格数据，它有一个标题行、一个描述行和多个列。

现场示例

<table>
  <thead>
    <tr>
      <th>Event Title 1</th>
      <th>Event Title 2<br>Mutliline</th>
      <th>Event Title 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Event 1 description<br>Multiline!</td>
      <td>Event 2 description</td>
      <td>Event 3 description</td>
    </tr>
  </tbody>
</table>

CSS

th td {
  margin: 5px;
}
th {
  border-bottom: green 2px solid;
  vertical-align: bottom;
}
td {
  vertical-align: top;
}

Answer 3

为什么不直接使用 CSS 表格？

http://jsfiddle.net/CeMrZ/

我没有包括所有的字体颜色等。只是布局代码。

CSS

.table {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.table>ul {
    display: table-row;
}
.table>ul>li {
    display: table-cell;
}
.table>ul.thead>li{
    vertical-align: bottom;
}

HTML

<div class="table">
    <ul class="thead">
        <li>Mae hyn yn enghraifft prif llawer hwy</li>
        <li>Mae hyn yn enghraifft prif llawer hwy<br />Mae hyn yn enghraifft prif llawer hwy</li>
        <li>Mae hyn yn enghraifft prif llawer hwy</li>
    </ul>
    <ul>
        <li>Mae llawer o bethau gwych cymaint yn mynd ymlaen yr haf hwn a, beth bynnag yw eich cynlluniau, nawr yw'r amser i fynd i'r afael a eich gwariant.</li>
        <li>2</li>
        <li>3<br />Mae llawer o bethau gwych cymaint yn mynd ymlaen yr haf hwn a, beth bynnag yw eich cynlluniau, nawr yw'r amser i fynd i'r afael a eich gwariant.</li>
    </ul>
</div>

Answer 4

试试这个它有效：

HTML 代码：

<section class="boxes">
    <ul class="inline">
        <li>
            <article>
                <h2>Mae hyn yn enghraifft prif llawer hwy</h2>
                <p>Mae llawer o bethau gwych cymaint yn mynd ymlaen yr haf hwn a, beth bynnag yw eich cynlluniau, nawr yw'r amser i fynd i'r afael a eich gwariant.</p>
                <a class="read-more" href="">Read more &gt;</a>
            </article>
        </li>
        <li>
            <article>
                <h2>green borders and push</h2>
                <p>Mae llawer o bethau gwych cymaint yn mynd ymlaen yr haf hwn a, beth bynnag yw eich cynlluniau, nawr yw'r amser i fynd i'r afael a eich gwariant.</p>
                <a class="read-more" href="">Read more &gt;</a>
            </article>
        </li>
        <li>
            <article>
                <h2>with less rows starts from the bottom like in the example</h2>
                <p>Mae llawer o bethau gwych cymaint yn mynd ymlaen yr haf hwn a, beth bynnag yw eich cynlluniau, nawr yw'r amser i fynd i'r afael a eich gwariant.</p>
                <a class="read-more" href="">Read more &gt;</a>
            </article>
        </li>
    </ul>
</section>

CSS 代码：

ul.inline {
    display: inline-block;
    list-style-type: none;
    margin: 0 0 20px;
    padding: 0;
    width: 978px;
}
ul.inline li {
    float: left;
    margin: 0 18px 0 0;
    padding: 0;
    width: 308px;
}
ul.inline li p{
    border-top: 5px solid #34750E;
}
ul.inline li h2 {
    color: #34750E;
    font-size: 21px;
    margin: 0 0 10px;
    padding: 0 0 10px;
    position: relative;
    height: 80px;
    vertical-align: bottom;
    display: table-cell;
}
ul.inline li a.read-more {
    color: #34750E !important;
}