Flotante a la izquierda y a la derecha

este problema me ha estado molestando por algún tiempo. Así que he creado algunas descripciones visuales de mi problemaFlotante a la izquierda y a la derecha

Primero aquí está mi estructura HTML Tengo 6 divs .. los primeros 3 flotan a la izquierda y los últimos 3 flotan a la derecha. La última imagen muestra el resultado que quiero pero parece que no puedo obtener. ¿Puede alguien por ahí que me ayude aquí

EDITAR // Lo sentimos heres mi HTML y CSS

<style> 
    .left { float:left; } 
    .right { float:right; } 
</style> 
<div id="container"> 
    <div class="left"></div> 
    <div class="left"></div> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div class="right"></div> 
    <div class="right"></div> 
</div>

NOTA: No puedo hacer una derecha izquierda derecha izquierda derecha izquierda opción porque Im conseguir mis datos de PHP a través de una consulta segunda consulta a mi base de datos .. primera consulta va a la izquierda va a la derecha .... gracias un montón

/EDIT

This is a mocukup of my HTML structure

mi f loats resultado en este

this is my current result

Esto es lo que quiero

I want this

Fuente

2012-06-12 Oldenborg

Coloque su código ... –

+1 para las imágenes agradables, -1 para ningún marcado o CSS en absoluto en la pregunta! –

uno a la izquierda, uno a la derecha –

Puede usar la propiedad CSS3 column-count para esto. Escribe así:

.parent{ 
    -moz-column-count: 2; 
    -moz-column-gap: 50%; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 50%; 
    column-count: 2; 
    column-gap: 50%; 
} 
.parent div{ 
    width:50px; 
    height:50px; 
    margin:10px; 
} 
.left{ 
    background:red; 
} 
.right{ 
    background:green; 
}

Marque esta http://jsfiddle.net/UaFFP/6/

Fuente

2012-06-12 10:48:08 sandeep

. Es útil mencionar el soporte del navegador cada vez que responda con columnas CSS3: http://caniuse.com/multicolumn. Por ejemplo, esto no funcionará en IE9, que muchas personas deben admitir. – thirtydot

Esto era exactamente lo que estaba buscando. Pero sí necesito soporte para ie7 y superior. Así que no es del todo útil ... pero tienes la idea correcta ya que la mayoría de las personas no lo hicieron. Así que gracias. – Oldenborg

Para IE, puede utilizar esta JS http://www.csscripting.com/css-multi-column/ – sandeep

Añadir la primera div izquierda, entonces la primera a la derecha y después de ellos div añaden <br style="clear:both"> y repetir el procedimiento.

Editar: Aquí está una respuesta actualizada:

<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div> 
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div> 
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>

Fuente

2012-06-12 10:12:59

Lo sentimos, esta no es una opción – Oldenborg

¿Por qué? Puede hacer que el **
** no tenga representación visual en absoluto. –

Im trabajando en un proyecto donde el único al que tengo acceso es a los archivos CSS ... todo lo demás está fuera de los límites – Oldenborg

flotador de la izquierda, derecha, y darle primero la clara: tanto la propiedad

<div class="left clear"></div> 
<div class="right"></div> 
<div class="left clear"></div> 
<div class="right"></div>

css

.left {float:left} 
.right {float:right} 
.clear {clear:both}

Example

Fuente

2012-06-12 10:14:59

@jacktheripper: bueno, lo has hecho antes que yo –

Supongamos que tiene otro div en el medio de ellos. A continuación, utilice este orden cronológico:

<div class="left"></div> 
<div class="right"></div> 
<div class="content"></div>

O si no lo hace, sólo tiene que añadir otra div que proporcionan un estilo clear:both a ella.

Fuente

2012-06-12 10:15:31

clase no id;) –

oh, sí. Gracias @khaled_webdev –

Tener que manipular el orden de los elementos tampoco es una buena solución. – crush

Usando el: selector de n-ésimo hijo y la limpieza después de 2 divs:

div { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    float: left; 
} 
div:nth-child(2n) { 
    background-color: green; 
    float: right; 
}

Live example

utilizan de alguna manera este método bastante hacky, que no requiere marcado adicional:

div { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    float: left; 
} 
div:nth-child(n) { 
    clear: both; 
} 

div:nth-child(2n) { 
    background-color: green; 
    float: right; 
    margin-top: -50px; //match this to the div height 
}

Live example

Fuente

2012-06-12 10:19:47 jacktheripper

He intentado modificarlo un poco, pero parece que no puede hacerlo bien. Aquí es donde estoy, no puedo tocar el HTML ... esto está arreglado ... Solo puedo trabajar con el CSS [Live example] (http://jsfiddle.net/nSDcb/) – Oldenborg

<style type="text/css"> 

.parent {width:50px; border:1px solid red;} 

.left {float:left; } 

.right{float:right;} 

.child{height:50px;width:50px;border:solid 1px green;margin:0 0 10px 0;} 

</style> 

<body> 

<div class="left parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

<div class="right parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

</body> 

</html>

Ten en cuenta que sería extraño no tener un DIV central, si ese es un caso flotante, los DIVs primarios restantes, por ejemplo anchos de 20% 60% 20%.

Fuente

2012-06-12 10:30:40 bdede

Lo habría hecho, pero estoy instruido para no tocar el HTML, solo puedo cambiar el CSS – Oldenborg

HTML:

<div class="leftcolums"> 
    <div class="left">1</div> 
    <div class="left">2</div> 
    <div class="left">3</div>  
</div> 
<div class="rightcolums"> 
    <div class="right">4</div> 
    <div class="right">5</div> 
    <div class="right">6</div> 
</div> 
<div class="clear"></div>

estilos:

.leftcolums{float:left;} 
.rightcolums{float:right;} 
.clear{clear:both;}

Fuente

2014-02-15 21:43:06

column-count, ya ha sido ampliamente apoyado - http://caniuse.com/#feat=multicolumn Así que si navegadores antiguos doesn' Te molesta que consideres usar i t.

Fuente

2016-01-30 18:18:40 Vlad

¿Y qué hace con ella (para resolver el problema del OP)? – dakab

Me gustaría saber, 3 años después: D – Oldenborg

Flotante a la izquierda y a la derecha

Respuesta

Cuestiones relacionadas