bloque en línea en el tramo

Esperaba que las dos etiquetas de tramo del siguiente ejemplo se mostraran una al lado de la otra, en su lugar se muestran una debajo de la otra. Si configuro el ancho de la clase span.right al 49%, se mostrarán uno al lado del otro. No puedo descifrar por qué se ha reducido el tramo correcto, ya que el tramo derecho tiene un margen/relleno invisible que lo hace tomar más del 50%. Estoy tratando de hacer esto sin usar tablas html. ¿Algunas ideas?bloque en línea en el tramo

<html> 
<head> 
    <title>Test Page</title> 
    <style type='text/css'> 
     * { 
      margin: 0; 
     } 

     html,body{ 
      margin:0; 
      padding:0; 
      height:100%; 
      width:100%; 
      border:none; 
     } 

     div.header{ 
      width:100%; 
      height:80px; 
      vertical-align:top; 
     } 

     span.left { 
      height:80px; 
      width:50%; 
      display:inline-block; 
      background-color:pink; 
     } 

     span.right { 
      vertical-align:top; 
      display:inline-block; 
      text-align:right; 
      height:80px; 
      width:50%; 
      background-color:red; 
     } 
    </style> 
</head> 
<body> 
    <div class='header'> 
     <span class='left'>Left Span 50% width</span> 
     <span class='right'>Right Span 50% width</span> 
    </div> 
</body> 
</html>

Gracias por la explicación. The float: left funciona maravillosamente con los resultados esperados en FF 3.1. Desafortunadamente, en IE6 el tramo del lado derecho representa el 50% del 50%, lo que le da un ancho del 25% de la ventana del navegador. Establecer su ancho al 100% logra los resultados deseados, pero se rompe en FF 3.1 que está en modo de cumplimiento de estándares y lo entiendo. Conseguir que funcione tanto en FF y IE 6, sin recurrir a hacks o el uso de múltiples hojas de estilo CSS ha sido un reto

Fuente

2008-08-29 rams

¿Por qué apoyar IE6? http://www.ie6nomore.com/ – jrummell

float: left;

Trate de añadir que a span.left

Esto causará que flote a la izquierda (como lo sugiere la sintaxis).

No soy un experto en CSS por cualquier medio así que por favor no toman este hecho como indiscutible, pero me parece que cuando se hace flotar algo, no hace ninguna diferencia a la posición vertical de las cosas por debajo de ella.

Si flota el span.right a la derecha y agrega texto debajo de ellos, debe obtener algunos resultados interesantes, para detener estos "resultados interesantes" puede usar "clear: left/right/both" que causará el bloqueo con el estilo claro para estar debajo de cualquier cosa flotando hacia la izquierda/derecha/ambas. W3Schools tiene una página en esta propiedad también.

Y bienvenido a Stackoverflow.

Fuente

2008-08-29 16:14:25 Teifion

Gracias por la respuesta rápida, agregando float: left hizo que los 2 tramos se rendericen uno al lado del otro. Sin embargo, no entiendo por qué el tramo se empuja hacia abajo sin el flotador. ¿Qué lo empuja? – rams

La altura de la luz es la razón por la cual la empujó hacia abajo para mí, y podría haber sido tu razón también. – Johannes

no me gusta este truco pero parece que para hacer el trabajo, tanto en Firefox y IE6:

span.right { 
    vertical-align:top; 
    display:inline-block; 
    text-align:right; 
    height:80px; 
    width:50%; 
    *width:100%; 
    background-color:red; 
}

Nota del *width: 100% que parece satisfacer los requerimientos de IE6 y es ignorado por Firefox.

Fuente

2008-08-29 17:50:18 rams

Esto se debe a que los bloques en línea y en línea incluyen espacios en blanco (en su caso, el salto de línea) entre los elementos. En su caso, el ancho combinado de los elementos es 50% + 50% + espacio en blanco> 100%.

Debe o bien poner los dos elementos en la misma fila en el documento HTML (sin espacio)

<div class='header'> 
    <span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span> 
</div>

O usar HTML comenta

<div class='header'> 
     <span class='left'>Left Span 50% width</span><!-- 
    --><span class='right'>Right Span 50% width</span> 
</div>

yo prefiero la última.

Fuente

2013-04-24 11:45:47 eba

Respuesta

Cuestiones relacionadas