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.
<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:
.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;
}
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:
<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>
.album{
text-align: center;
padding: 10px;
}
.album .bloque{
display: inline-block;
width: 200px; /* 48% */
height: 100px;
vertical-align: top;
border: 1px solid red;
}
También display:inline-flex. Te alineará los bloques arriba.
<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>
Ya lo he solucionado MUCHAS GRACIAS A LOS DOS!!!!!!!
Un saludo colegas