CSS: SPAN con ancho fijo
Sabido es que las etiquetas HTML tiene por omisión una disposición en bloque (block) o en línea (inline). Son ejemplo de elementos dispuestos en bloque <div>, <p>, <h1>, <form> y <li>; mientras que los que se muestran en línea pueden ser <span>, <a>, <label>, <strong>, <b> y <em>. Una de las características de estos últimos es que se le puede cambiar el largo (width).
span { width: 100px; }
En teoría, esto hace que la caja que genera el <span> tenga 100 pixels de largo, pero lamentablemente en el resto de los navegadores el <span> sólo tendrá el largo de los caracteres que aloje. Para solucionar este problema se puede utilizar el siguiente truco:
span { width: 100px; display:block; }
Esto hace que el <span> se convierta en un elemento en bloque, pero también causará que el siguiente elemento en línea salte a la línea siguiente. Para evitar esto se puede agregar float:left al .
6 Comentarios:
Muy bueno el truco! Me has salvado la vida! Gracias!
Si barbaro pero el texto dentro del span se queda desalineado verticalmente con el resto de lo que tengo dentro de una celda :(
Lo pude arreglar dandole un margin-top para que bajara un poquito :)
¡Bárbaro tío! Otra vida que salvas, Mil gracias.
Juega con esto, aunque a lo mejor te sirva mejor esto:
inline-block
estos son el resto:
inline
block
list-item
run-in
inline-block
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
none
inherit
Mira esto, sale juntito y bien alineado, por cierto, en el html cambien el signo menor y mayor de las etiquetas porque no me permite ponerlas, en su lugar puse esto []:
.foto{
width:80px;
height:100px;
display:table-cell;
}
.comentario{
width:400px;
display:table-cell;
height:100px;
border: 1px solid #eceff5;
background-color: #eceff5;
}
y en la pagina lo pones así:
[span class="foto"] [img src="imagenes/amigo00.jpg"][/span]
[span class="comentario"]
alooooooooooooooooo[/span]
Mandar un comentario