對齊列表並將文本推送到底部

我有一個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

來源

2012-08-03 Andrea Turri

您已經嘗試了什麼？在[jsfiddle.net]（http://jsfiddle.net）創建一個示例 – 2012-08-03 10:07:17

你有一些示例代碼嗎？當你在它，你可以張貼它http://jsfiddle.net或http://jsbin.com – 2012-08-03 10:07:32

演示你不想使用

？它可以使用表格輕鬆完成。 – rahool2012-08-03 10:08:35

回答

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

從這個上心後：How can I positioning LI elements to the bottom of UL list

來源

2012-08-03 10:22:13 techfoobar

** + 1 **優秀的答案！;） – 2012-08-03 10:25:18

有一個'.Net foreach'重複一個列表並推入標題和內容。正如我在我的文章中寫到的那樣，它是動態的。如果我有2個列表，我該怎麼做？ – 2012-08-03 10:29:17

你的意思是你在課堂盒子裏有多個'UL's？如果是這樣你需要一個不同的解決方案！ – techfoobar 2012-08-03 10:31:47

我已經建立了一個使用表格的例子。這是表格數據，它有一個標題行，一個描述行和多個列。

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

來源

2012-08-03 10:22:07

試試這個它的工作原理：

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-03 10:35:20

你爲什麼不只是使用一個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-03 10:51:42 Leigh

相關問題