Alinear una lista y enviar texto al final

Tengo una lista de 3 cajas con título, borde y breve descripción.Alinear una lista y enviar texto al final

En el momento en que se parece a esto:

enter image description here

me gustaría utilizando sólo CSS para alinear los bordes verdes y empuje todos los títulos una fila a la parte inferior.

El contenido y los títulos son dinámicos así, puede suceder que habrá 1, 2, 3 filas para el título pero siempre quieren que los títulos con menos filas comienza desde la parte inferior como en el ejemplo siguiente.

enter image description here

no puedo usar Javascript!

Cualquier sugerencia será apreciada.

Por el momento la estructura del código es la siguiente:

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

Fuente

2012-08-03 Andrea Turri

Lo que has probado? crea un ejemplo en [jsfiddle.net] (http://jsfiddle.net) –

¿tienes algún código de ejemplo? Mientras estás en ello, ¿podría enviar como un demo en http://jsfiddle.net o http://jsbin.com –

Usted no desea utilizar

? Se puede lograr fácilmente usando la tabla. – rahool

Respuesta

ACTUALIZACIÓN

Marque esta violín actualizado que utiliza el marcado como en su pregunta: http://jsfiddle.net/techfoobar/hmCuj/

La lógica de la solución es básicamente la misma.

Marque esta violín: 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; 
}

tuvo la idea de esta puesto: How can I positioning LI elements to the bottom of UL list

Fuente

2012-08-03 10:22:13 techfoobar

** ** + 1 excelente respuesta !;) –

hay un '.Net foreach' que se repiten una lista y presione adentro título y contenido. Como escribí en mi publicación, es dinámico ... Si tengo 2 listas, ¿cómo puedo hacer eso? –

¿Quiere decir que tendrá múltiples 'UL's dentro de una' sección' con cuadros de clase? ¡Si es así, necesitarás una solución diferente! – techfoobar

He creado un ejemplo usando tablas. Se trata de datos tabulares, tiene una línea de encabezado, una línea de descripción y varias columnas.

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

Fuente

2012-08-03 10:22:07

Prueba esto funciona:

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>

Código 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; 
}

Fuente

2012-08-03 10:35:20

¿Por qué no sólo tiene que utilizar una tabla de CSS?

http://jsfiddle.net/CeMrZ/

no he incluido todos los de la fuente colorear etc Sólo el código de diseño.

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>

Fuente

2012-08-03 10:51:42 Leigh

Cuestiones relacionadas