Question

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

目前它看起来像这样：

enter image description here

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

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

enter image description here

我不能使用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

<强>更新

检查这个使用标记的更新小提琴：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;
}

从这篇文章中了解了：How can I positioning LI elements to the bottom of UL list

Answer 2

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

<强> Live Example

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

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

4 个答案: