Quiero poner un <div> al lado de otro <div>

RevolucionVegana · 1 Agosto 2016, 15:16 PM

Hola a todos quiero poner un div al lado de otro div, y estos dos div dentro de un div padre, el primer div hijo lo quiero poner a la izquierda y dentro una imagen y el segundo div hijo lo quiero poner a la derecha para poner un texto, más o menos lo tengo todo el problema es que se queda la imagen arriba al lado izquierdo y el texto bajo al lado derecho, me podéis echar una mano?, gracias.

Código (html4strict) [Seleccionar]


<div class="album">
			<div id="anuncio1">
				<div id="imagenprimera">
				<img src="img/fotos/foto10.jpg">
				</div>
				<div class="ajustes1">
				<h2>Un título</h2>
				<h4>Descripción</h4>
				<p>Un texto para la descripcion</p>
				<h4>Otra descripcion</h4>
				<p>Otro texto para otra descripcion</p>
				<h4>Otro más</h4>
				<p>Texto texto</p>
				<h4>Ultimo titulo</h4>
				<p>más texto por aquí</p>
				</div>
			</div>
</div>

después código css:

Código (css) [Seleccionar]

.album{
	margin-left:2em;
	margin-right:2em;
	margin-top:1em;
	margin-bottom:2em;


}

.album #anuncio1{
	margin-top:0.5em;
	margin-bottom:1em;
	margin-left:10%;
	margin-right:10%;
	background:#FF5733;
	border-radius:15px;



}


.album #anuncio1 .ajustes1 h2{

	text-align:center;
	font-weight:bold;




}

.album #anuncio1 .ajustes1 h4{

	text-align:center;
	font-weight:bold;




}



.album #anuncio #imagenprimera img{
	margin-right:70%;
	width:30%;
	




}



.album #anuncio1 .ajustes1{
	margin-left:33%;
	width:67%;
	border-top-width:0.5em;
	border-right-width:0.5em;
	border-left-width:0.5em;
	border-bottom-width:0.5em;
	border-top-color:black;
	border-right-color:black;
	border-left-color:black;
	border-bottom-color:black;
	border-top-style: solid;
	border-bottom-style: solid;
	border-right-style: solid;
	border-left-style: solid;

}

cassiani · 1 Agosto 2016, 22:01 PM

hay varias formas, puedes usar display: inline-block y jugar luego con el alto y el ancho de las cajas y el contenido, mira un ejemplo:

Código [Seleccionar]

<div class="album">
   <div class="bloque anuncio1">
      <div id="imagenprimera">
         <img src="img/fotos/foto10.jpg">
      </div>
   </div>
   <div class="bloque ajustes1">
	<h2>Un título</h2>
	<h4>Descripción</h4>
	<p>Un texto para la descripcion</p>
	<h4>Otra descripcion</h4>
	<p>Otro texto para otra descripcion</p>
	<h4>Otro más</h4>
	<p>Texto texto</p>
	<h4>Ultimo titulo</h4>
	<p>más texto por aquí</p>
      </div>
   </div>
</div>

Código [Seleccionar]

.album{
   text-align: center;
   padding: 10px;
}

.album .bloque{
   display: inline-block;
   width: 200px; /* 48% */
   height: 100px;
   vertical-align: top;
   border: 1px solid red;
}

ivancea96 · 2 Agosto 2016, 00:11 AM

También display:inline-flex. Te alineará los bloques arriba.

Código (html) [Seleccionar]

<html>
    <head>
        <style>
            .parent > div{
                display: inline-flex;
            }
        </style>
    </head>

    <body>
        <div class="parent">
            <div><pre>A
B
C
D
E
F
G
H
I</pre></div>
            <div><pre>N
J
K
L
M
O
P
Q
R
S</pre></div>
            <div><pre>T
U
V
W
X
Y
Z</pre></div>
        </div>
    </body>
</html>

RevolucionVegana · 2 Agosto 2016, 18:57 PM

Ya lo he solucionado MUCHAS GRACIAS A LOS DOS!!!!!!!

Un saludo colegas

Test Foro de elhacker.net SMF 2.1

Quiero poner un <div> al lado de otro <div>

RevolucionVegana

cassiani

ivancea96

RevolucionVegana