eine Liste ausrichten und drücken Text unten

ich mit dem Titel eine 3-Boxen-Liste haben, Grenze und eine kurze Beschreibung.eine Liste ausrichten und drücken Text unten

Im Moment sieht es wie folgt aus:

enter image description here

Ich möchte nur CSS mit den grünen Grenzen ausrichten und schieben alle eine Zeile Titel nach unten.

Die Inhalte und Titel sind dynamisch, so kann es vorkommen, dass es 1, 2, 3 Zeilen für den Titel gibt, aber ich möchte immer, dass Titel mit weniger Zeilen von unten beginnt wie im Beispiel unten.

enter image description here

Ich kann Javascript nicht verwenden!

Jeder Vorschlag wird geschätzt.

Im Moment ist die Code-Struktur folgt aus:

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

Quelle

2012-08-03 Andrea Turri

Was Sie versucht haben? Erstellen Sie ein Beispiel unter [jsfiddle.net] (http://jsfiddle.net) –

Haben Sie einen Beispielcode? Wenn Sie schon dabei sind, können Sie es als Demo auf http://jsfiddle.net oder http://jsbin.com veröffentlichen. –

Sie möchten nicht

verwenden? Es kann leicht unter Verwendung der Tabelle erreicht werden. – rahool

Antwort

UPDATE

prüfen diese aktualisierte Geige, die die Markup wie in Ihrer Frage verwendet: http://jsfiddle.net/techfoobar/hmCuj/

Lösung Logik ist im Grunde die gleiche bleibt.

prüfen diese Geige: 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; 
}

habe die Idee von diesem Beitrag: How can I positioning LI elements to the bottom of UL list

Quelle

2012-08-03 10:22:13 techfoobar

** + 1 ** ausgezeichnete Antwort !;) –

Es gibt einen ‚Net foreach‘, die wiederholen eine Liste und drehe Titel und Inhalt hinein. Wie ich in meinem Post schrieb, ist es dynamisch. Wenn ich 2 Listen habe, wie kann ich das tun? –

Wollen Sie mehr 'UL's in einem' section' mit Klasse-Box haben werden? Dann brauchen Sie eine andere Lösung! – techfoobar

Ich habe ein Beispiel unter Verwendung von Tabellen einrichten. Dies sind Tabellendaten, eine Kopfzeile und eine Beschreibungszeile sowie mehrere Spalten.

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

Quelle

2012-08-03 10:22:07

Try This Es funktioniert:

HTML-Code:

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

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

Quelle

2012-08-03 10:35:20

Warum Sie nicht einfach eine CSS-Tabelle verwenden?

http://jsfiddle.net/CeMrZ/

Ich habe nicht alle der Schrift Färbung etc. Nur der Layout-Code enthalten.

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>

Quelle

2012-08-03 10:51:42 Leigh

Verwandte Themen