Geek asks and answers

Align the list and click the text on the bottom

I have a list of 3 mailboxes with a title, border and a brief description.

At the moment, it looks like this:

enter image description here

I would like to use only CSS to align the green borders and push all the names of one line to the bottom.

The content and titles are dynamic, so it may happen that there will be 1, 2, 3 lines for the heading, but I always want the headings with fewer lines to start from the bottom, as in the example below.

enter image description here

I can not use Javascript!

Any suggestion would be appreciated.

At the moment, the code structure is as follows:

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

EDIT:

FIDDLE UP HERE

+5
source share
4 answers

UPDATE

, , : 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

+3

. , , .

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

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>
+1

:

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

More articles:


All Articles