Pregunta

Yo esperaba que el lapso de dos etiquetas en el siguiente ejemplo para mostrar uno al lado del otro, en lugar de mostrar una debajo de la otra.Si puedo configurar el ancho de la clase span.derecho a un 49% que se muestra junto a cada uno de los otros.Yo no soy capaz de averiguar por qué el derecho span es empujado hacia abajo, como el derecho span tiene algunos invisible relleno/margen que le hace tomar más de un 50%.Estoy tratando de hacer esto sin el uso de tablas de html.Alguna idea?

<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.El float:left funciona a la perfección con los resultados esperados en el FF 3.1.Por desgracia, en IE6 el lado derecho span representa el 50% del 50%, en efecto, dándole un ancho de 25% de la ventana del navegador.Configuración de su ancho al 100% logra los resultados deseados, pero se rompe en FF 3.1, que es en el cumplimiento de los estándares modo y yo lo entiendo.Conseguir que el trabajo, tanto en FF e IE 6, sin tener que recurrir a hacks o el uso de múltiples CSS las hojas ha sido un reto

¿Fue útil?

Solución 

float: left;

Trate de añadir que a palmo.a la izquierda

Se hará flotar a la izquierda (como se sugiere por la sintaxis).

Yo no soy un experto en CSS, por cualquier medio, así que por favor no tome esto como hecho indiscutible, pero me parece que cuando algo está flotando, no hace ninguna diferencia a la posición vertical de las cosas de abajo.

Si flota en el espacio.derecho a la derecha, a continuación, añadir texto debajo de ellos, usted debe obtener algunos resultados interesantes, para detener a estos "resultados interesantes" puede utilizar "clear:izquierdo/derecho/ambas" que hará que el bloque con el claro estilo a estar bajo nada flotando a la izquierda/derecho/ambas. W3Schools tienen una página sobre esta propiedad también.

Y bienvenidos a Stackoverflow.

Otros consejos

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

Usted debe poner los dos elementos en la misma fila en el documento HTML (sin el espacio)

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

O el uso de los comentarios HTML

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

Yo mismo prefiero el segundo.

No me gusta este hack pero parece que 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 la *width: 100% que parece satisfacer IE6 del requisito y es ignorado por Firefox.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top