align 2 divs horizontalmente en el interior un tercer contenedor div

tengo el siguiente código:align 2 divs horizontalmente en el interior un tercer contenedor div

<div id="container"> 
    <div id="div1">Div 1</div> 
    <div id="div2">Div 2</div> 
</div>

Quiero ser capaz de tener # box1 y # caja2 uno al lado del otro en el interior del contenedor. Contenedor está centrada

Fuente

2012-08-01 cppit

hacer u quieres 2 cols dentro de un div? –

Nos ayuda si nos dice qué CSS tiene actualmente y cuál es el problema específico. – Jeroen

css es complicado, cada caja lleva varios elementos ... Intenté simplificar el código proporcionando una estructura básica – cppit

Esto centrará el contenedor, y tienen los dos divs dentro de ella centrada, mientras que la separación de los estilos del contenido real:

HTML:

<div id="container"> 
    <div>Div 1</div> 
    <div>Div 2</div> 
</div>

CSS:

#container > div 
{ 
    display: inline-block; 
    border: solid 1px #000; 
} 
#container 
{ 
    border: solid 1px #ff0000; 
    text-align: center; 
    margin: 0px auto; 
    width: 40%; 
}

Ejemplo de trabajo:

http://jsfiddle.net/JLjjK/

2017 Actualización:

Flexbox es cada vez más común. He aquí una manera de lograr resultados similares con Flexbox:

HTML:

<div class="outer"> 
    <div>1</div> 
    <div>2</div> 
</div>

CSS:

.outer { 
    border: 1px solid #000; 
    display:flex; 
    justify-content: center; 
    padding: 3px; 
} 
.outer > div { 
    border: 1px solid #000; 
    margin:2px; 
}

Ejemplo: https://jsfiddle.net/pb61a1cj/1/

Fuente

2012-08-01 18:09:06

Esto solo funciona cuando ambos divs no tienen mucho texto. – MrSnowflake

@MrSnowFlake Aún así debería funcionar bien, solo tiene que establecer el ancho de los divs a la mitad del ancho del contenedor: http://jsfiddle.net/JLjjK/172/ –

No, no funciona: http: //jsfiddle.net/JLjjK/203/ – Alex

Prueba esto:

HTML:

<div id="container"> 
    <div id="box1" class="inlined"> 
     <div id="box3"></div> 
     <div id="box4"></div> 
    </div> 
    <div id="box2" class="inlined"></div> 
</div>

CSS:

.inlined 
{ 
    display: inline-block; 
}

Usted podría también utilizar .inlined { float: left; } o .inlined { float: right; }, pero los que puede tener un comportamiento inesperado en función de los alrededores elementos.

Fuente

2012-08-01 18:03:02 JAB

Intenté implementar esto, pero no funciona. http://jsfiddle.net/hdk5e/ –

@RichardBronosky Ese violín funciona para mí. Si es el centrado, no centré el div externo porque hacerlo no estaba relacionado con tener los dos divs internos uno al lado del otro (pero no el nivel más interno de div diving, para mostrar que esos aún se acumulan). ¿O se refería al hecho de que los puntos medios de los dos divisores uno al lado del otro no se alinean, y en cambio son los fondos los que están alineados? – JAB

Bien, estaba confundido. Gracias por la claridad. Esperaba que el contenido de la caja "en línea" se alineara horizontalmente, no las cajas "en línea". Esto lo hace más claro para mí. http://jsfiddle.net/hdk5e/1/ –

espero que esto es lo que buscas ..

<style type="text/css"> 
.container{ 
    margin-left: auto; 
    margin-right: auto; 
    width: 300px; 
} 
.box1, .box2 { 
    width:280px; 
    height:auto; 
    float:left; 
    margin-bottom:10px; 
    padding:10px; 
    border:1px solid #888; 
} 
.box1 { 
    clear:left; 
    margin-right:10px; 
} 
.clear { 
    clear:both; 
} 
</style> 



<div id="container"> 
    <div class="box1"> 
     Enter box 1 content here. 
    </div> 
    <div class="box2"> 
     Enter box 2 content here. 
    </div> 
    <div class="clear"></div> 
</div>

Fuente

2012-08-01 18:37:44 150GritSandpaper

align 2 divs horizontalmente en el interior un tercer contenedor div

Respuesta

Cuestiones relacionadas