2012-02-10 8 views
20

Tengo dos divisiones dentro de un contenedor. Uno flota a la izquierda y otro flota a la derecha. Ambos son aproximadamente 60% más anchos que el contenedor y están diseñados de tal manera que se superponen en el medio (el elemento derecho tiene prioridad).CSS: hacer que dos elementos flotantes se superpongan

¿Cómo hago para que se superpongan en lugar de apilarse verticalmente como lo hacen los elementos flotantes? Si posiciono de manera absoluta el elemento correcto, el div que lo contiene no se expande para ajustarse al contenido.

de código (por desgracia no puedo jsFiddle esto como sus servidores son de sólo lectura atm):

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    width: 400px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    float: left; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    float: right; 
} 
+0

Si estoy correcto, el atributo "mostrar: en línea" tampoco permite establecer las dimensiones. Esto significa que si configura su pantalla en línea, no debe definir ningún ancho y/o altura. Y flotas, ese en línea me parece inútil. Utilizaría z-index, que puede controlar a través de javascript on: coloca el cursor sobre el elemento o hace clic en() s (intercambia valores entre los dos elementos). ¿Qué tan dinámica es tu interfaz? – benqus

+0

El 'display: inline' es redundante ya que cualquier elemento que esté' float'ed es automáticamente 'display: block'. – Gareth

Respuesta

37

Uso margin-right un negativo en el cuadro de la izquierda de manera que se permite que el cuadro de la derecha a solaparse:

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    float: left; 
    margin-right:-104px; 
} 

Las 104 píxeles es la cantidad de solapamiento, más 4 píxeles para las fronteras.

Aquí hay un jsfiddle.

+0

tan increíble. He estado buscando una solución para la superposición de columnas flotantes por un tiempo (para pestañas de altura automática http://j.mp/1iQ30Fz) ¡Esta es una solución perfecta! – sstur

+3

No me gusta esto. Parece ser un caso muy "personalizado". Los problemas pueden ocurrir, si el tamaño del segundo elemento se cambia de 100px a lo que sea ... –

0

Se puede crear los divs con posición absoluta y añadir un índice z positiva a la que desea estar en frente.

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    width: 400px; 
    background-color: #eee; 
    position: relative; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: block; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    display: inline; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    z-index: 1; 
} 
+0

En caso de que no supiera que no se necesita el "px" cuando defina "0px", simplemente puede usar top: 0; guardar algunos caracteres – thenetimp

+1

Ya he hecho esto, pero significa que el contenedor principal no se expandirá para ajustarse al contenido – Chris

+0

Puede poner los anchos del contenedor y de los divs con porcentajes en lugar de valores fijos. p.ej. ancho del contenedor: 100%, # ancho del borde 60% y # ancho correcto 60%. –

2

Solo puede hacer eso con el posicionamiento.

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    width: 400px; 
    background-color: #eee; 
    position: relative; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 2; 
} 
-1

Prueba con esto:

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 
<style> 
#container { 
    width: 400px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    float: left; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    margin-left: 150px; 
    position: absolute; 
} 
</style> 
+0

deberían estar naturalmente alineados, en lugar de engañar. –

-1

¿Qué hay de tirar de la div derecha con margen negativo. ¿Algo como esto?

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

#container { 
    position: relative; 
    width: 400px; 
    height: 110px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    height: 100px; 
    border: 1px solid green; 
    float: left; 
} 

#right { 
    position: relative; 
    float: right; 
    width: 250px; 
    height: 100px; 
    top: -100px; 
    border: 1px solid red; 
} 
0

Haga que el contenedor sea más grande para que ambos quepan. Luego use la posición relativa e izquierda: -100px o lo que sea en la de la derecha.

1

¿Se puede agregar un div adicional allí?

<div id="container"> 
    <div id="left"> 
     <div id="left-inner">left</div> 
    </div> 
    <div id="right">right</div> 
</div> 
<style> 
#container { 
    width: 400px; 
} 

#left { 
    float: left; 
    width: 0px; 
    overflow:visible; 
} 

#left-inner { 
    float: right; 
    width: 250px; 
} 

#right { 
    width: 250px; 
} 
</style> 
+1

Agregar una estructura adicional para lograr el estilo es un uso incorrecto de HTML y CSS. –

+0

@Bradley A. Tetreault: como regla general, esto es correcto. pero la realidad es peor entonces esto - tome IE6-8 como ejemplo y todos sus arreglos/hacks, que también involucran una gran cantidad de div.fixer (o div # fixer) – llamerr

0

excelente solución: http://jsfiddle.net/A9Ap7/237/


Por lo tanto, no uso:

MARGIN-LEFT:100px... 

== o comandos similares.
El problema es que, si se cambia el tamaño de los elementos de la izquierda, si se cambia el tamaño de la ventana o etc. ,,, ¡entonces tendrá problemas! , por lo tanto, no use esos "trucos" sucios personalizados, sino que cree una estructura normal dentro de html, por lo que deben ordenarse de forma natural.

+0

Esto no resuelve el problema de permitir dos elementos que son 60% del ancho del contenedor para superponerse. – Gareth

Cuestiones relacionadas