5

タイトル、境界線、簡単な説明が記載された3つのボックスのリストがあります。

現時点では、次のようになっています。

ここに画像の説明を入力してください

CSSのみを使用して緑の境界線を揃え、1行のタイトルをすべて下にプッシュしたいと思います。

コンテンツとタイトルは動的であるため、タイトルに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;
        }

編集：

ここでフィドル

4

4 に答える 4

3

アップデート

あなたの質問のようにマークアップを使用するこの更新されたフィドルをチェックしてください：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リストの一番下に配置するにはどうすればよいですか？

于 2012-08-03T10:22:13.000 に答える
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;
}
于 2012-08-03T10:22:07.870 に答える
1

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>
于 2012-08-03T10:51:42.703 に答える
0

これを試してくださいそれは動作します：

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;
}
于 2012-08-03T10:35:20.673 に答える