Hola, no soy muy bueno con css/floats/blocks, etc.
tengo este tipo de configuracion
<div class="blue">1</div> <div class="red">2</div> <div class="blue">3</div> <div class="red">4</div> <div class="blue">5</div> <div class="red">6</div>Quiero diseñarlo para que 1 y 2 estén en la misma línea (flotantes a la izquierda y a la derecha), luego 3 y 4 estén en la misma línea (flotantes a la izquierda y a la derecha) y así sucesivamente.
Actualmente estos elementos se crean en un bucle. He intentado todo tipo de métodos para que los elementos se alineen como quiero sin éxito.
Creo que quieres que sean dos por fila, ¿correcto?
Puede agregar una propiedad flexible al contenedor principal. Establezca el ajuste flexible para envolver , luego agregue un ancho del 50% en sus elementos secundarios (teniendo en cuenta cualquier margen heredado o relleno que afecte el ancho de los diseños para no desbordar el ajuste flexible) , luego justifique el contenido al espacio entre , este obligará a los elementos a sus respectivos lados o mejor dicho es; coloque el espacio "sobrante" que los niños en esa fila no están ocupando, en el medio de los dos elementos.
* { /* set box-sizing on all elements to border-box */ box-sizing: border-box; } body { /* remove any margin or padding from the body */ margin: 0; padding: 0; } #cont { /* add display flex, flex-wrap and justify-content to space between */ display: flex; flex-wrap: wrap; justify-content: space-between; } #cont>div { /* Set your child divs to a percentage that will only give you two per row the flex-wrap will push elements down */ width: 50%; } .blue { background-color: lightblue; border: 1px solid darkblue; } .red { background-color: pink; border: 1px solid darkred; text-align: right; /* remove if you want standard left side text-alignment on red elements */ } <div id="cont"> <div class="blue">1</div> <div class="red">2</div> <div class="blue">3</div> <div class="red">4</div> <div class="blue">5</div> <div class="red">6</div> </div>Si esto no es lo que estaba buscando, hágamelo saber y puedo editar o eliminar esta respuesta.