imagenes - Equivalente CSS de tabla Rowspan con altura de fluido
tablas en html5 (3)
En primer lugar, lo que estás haciendo me parece una tabla, así que tal vez quieras considerarlo. Sin embargo, hacerlo con CSS es un poco más complicado (a menos que haga el estilo de la tabla en CSS). El siguiente código funciona pero no centra verticalmente el texto en el cuadro:
<html><head><title>Test2</title></head><body>
<div style="width:300px; padding: 2px; border: 1px solid black;">
<div style="float:right; width: 100px;">
<div style="border: 1px solid black; margin-bottom: 2px;">
Here is some sample text. And some additional sample text.
</div>
<div style="border: 1px solid black;">
Here is some sample text. And some additional sample text.
</div>
</div>
<div style="border: 1px solid black; margin-right: 102px;">
<div>
This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
</div>
<div style="clear: right; margin-bottom: -1px;"></div>
</div>
</div></body></html>
Las celdas de tabla en CSS son más fáciles:
<!DOCTYPE html>
<html><head><title>Test2</title></head><body>
<div style="display: table; width:300px; border: 1px solid black; border-spacing: 2px;">
<div style="display: table-cell; border: 1px solid black; vertical-align: middle;">
This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
</div>
<div style="display: table-cell; width: 100px;">
<div style="border: 1px solid black; margin-bottom: 2px;">
Here is some sample text. And some additional sample text.
</div>
<div style="border: 1px solid black;">
Here is some sample text. And some additional sample text.
</div>
</div>
</div>
</body>
</html>
Estoy tratando de lograr lo siguiente usando CSS:
<table border="1" width="300px">
<tr>
<td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td>
<td>Here is some sample text. And some additional sample text.</td>
</tr>
<tr>
<td>Here is some sample text. And some additional sample text.</td>
</tr>
</table>
Los ejemplos que he visto para lograr esto utilizan alturas fijas o permiten que el contenido se ajuste a la columna de la izquierda. ¿Hay una manera elegante de lograr esto usando CSS?
Esto es lo que uso: http://www.ejeliot.com/samples/equal-height-columns/example-7.html
Solo usaría la segunda columna como envoltorio para los otros dos elementos (menos semánticos). Esa debería ser la forma más fácil.
Necesitaba algo muy similar. Desafortunadamente, todas estas soluciones son bastante complejas, llegué con algo muy simple (quizás demasiado simple) - display: inline-block utilizada display: inline-block
HTML
<div>
<span id="v">
text in the left
</span>
<div id="x">
<div>upper row</div>
<div>lower row</div>
</div>
</div>
CSS
#x {
display: inline-block;
vertical-align: middle;
}