CSS: ancho no respetado en la etiqueta span

Tengo un problema con uno de mis tramos. Por favor cosider los siguientes estilos:CSS: ancho no respetado en la etiqueta span

.form_container .col1che 
{ 
float: left; 
width: 4%; 
text-align: left;  
} 

.form_container .col2che 
{ 
float: left; 
width: 80%; 
text-align:left; 
} 

.form_container .col3che 
{ 
float: right; 
width: 13%; 
text-align:right; 
}

Estos 3 vanos en mi código:

<div class="row"><!-- start: "row" --> 
    <span class="col1che">   
      <?php //some db feeds ?>   
    </span> 
    <span class="col2che"> 
      <?php //some db feeds ?> 
    </span> 
    <span class="col3che"> 
      <?php //some db feeds ?> 
    </span> 
    <div class="clear"></div> 
</div><!-- end: "row" -->

El problema se produce cuando no hay datos que se muestran en "COL1CHE" (o tal vez incluso en alguna de ellas aunque no estoy seguro) cuando no hay datos, este tramo "colapsa" y no se respeta su ancho. Esto sucede en Firefox, en IE no se "colapsa".

Incluí una clase "clara" para ver si esto ayuda pero fue en vano.

¿Alguna idea?

Fuente

2009-07-21 chicane

hmmm, lo que ustedes dicen tiene mucho sentido, pero por alguna razón, incluso después de la adición de display: block todavía "colapsa" divertido, si puedo añadir un borde a la clase de la columna se mostrará la anchura adecuada incluso si no hay contenido pero si no hay contenido, ningún borde, simplemente colapsa – chicane

o sí, otra cosa, ¿por qué si mis tramos no se configuraron como bloques y si hay contenido dentro de ellos, entonces los anchos están configurados correctamente como en el estilo ¿hoja? (no estoy debatiendo si los anchos son respetados por elementos en línea, soy curioso por qué funcionó para mí) – chicane

display: blockno lo ayudará porque cuando se activa el flotador, los elementos se cambian automáticamente al modo de bloqueo, cualquiera que sea su modo inicial, por lo que su ancho debería funcionar.

El problema puede ser con la etiqueta <span> vacía que podría no mostrarse debido a alguna regla poco clara que no recuerdo. Debería intentar evitar que su tramo quede vacío, tal vez agregando un   si el contenido está vacío.

Fuente

2009-07-21 20:29:40

ok genial, los elementos flotando se convierten automáticamente en bloques explica mucho en términos del comportamiento que vi en mi página ... intenté la punta nbsp y funcionó muy bien gracias ...si alguien sabe por qué el contenido no podría colapsar, tal vez solo puedan aclarar este curioso comportamiento, pero por ahora esta es una gran solución. – chicane

para hacer este trabajo sólo tiene que añadir

display: block;

Para el estilo.

Fuente

2009-07-21 20:09:12

Span es un elemento en línea y, por lo tanto, no puede establecer un ancho. Para establecer un ancho primero debe establecerlo en un elemento de bloque con

display:block;

Después de eso, puede establecer un ancho. Desde palmo es un elemento en línea nativa, puede utilizar inline-block también y va a trabajar incluso en IE:

display:inline-block;

Fuente

2009-07-21 20:09:15 richard

anchura no es honrado porque palmo es un elemento en línea. Para solucionar este problema, agregue:

display: inline-block;

Dependiendo de su situación, display: inline-block puede ser mejor que display: block porque cualquier contenido después de un fragmento no se verá obligado a una nueva línea.

Fuente

2009-07-21 20:09:59 jimyi

Mostrar block y opcionalmente flotar left me ayudó.

display: block; 
float: left;

Fuente

2014-07-14 11:34:18 Andrei

CSS: ancho no respetado en la etiqueta span

Respuesta

Cuestiones relacionadas