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;
        }

---

编辑:

FIDDLE UP HERE

Answer 1

更新

检查这个更新的 fiddle ，它使用您问题中的标记:http://jsfiddle.net/techfoobar/hmCuj/

解决逻辑基本保持不变。

---

检查这个 fiddle :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;
}

从这篇文章中得到灵感:How can I positioning LI elements to the bottom of UL list