elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Recuerda que debes registrarte en el foro para poder participar (preguntar y responder)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Quiero poner un <div> al lado de otro <div>		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Quiero poner un <div> al lado de otro <div>  (Leído 3,786 veces)
RevolucionVegana


Desconectado Desconectado

Mensajes: 477



Ver Perfil
Quiero poner un <div> al lado de otro <div>
« en: 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
  1. <div class="album">
  2. 			<div id="anuncio1">
  3. 				<div id="imagenprimera">
  4. 				<img src="img/fotos/foto10.jpg">
  5. 				</div>
  6. 				<div class="ajustes1">
  7. 				<h2>Un título</h2>
  8. 				<h4>Descripción</h4>
  9. 				<p>Un texto para la descripcion</p>
  10. 				<h4>Otra descripcion</h4>
  11. 				<p>Otro texto para otra descripcion</p>
  12. 				<h4>Otro más</h4>
  13. 				<p>Texto texto</p>
  14. 				<h4>Ultimo titulo</h4>
  15. 				<p>más texto por aquí</p>
  16. 				</div>
  17. 			</div>
  18. </div>

después código css:

Código
  1. .album{
  2. 	margin-left:2em;
  3. 	margin-right:2em;
  4. 	margin-top:1em;
  5. 	margin-bottom:2em;
  6.  
  7.  
  8. }
  9.  
  10. .album #anuncio1{
  11. 	margin-top:0.5em;
  12. 	margin-bottom:1em;
  13. 	margin-left:10%;
  14. 	margin-right:10%;
  15. 	background:#FF5733;
  16. 	border-radius:15px;
  17.  
  18.  
  19.  
  20. }
  21.  
  22.  
  23. .album #anuncio1 .ajustes1 h2{
  24.  
  25. 	text-align:center;
  26. 	font-weight:bold;
  27.  
  28.  
  29.  
  30.  
  31. }
  32.  
  33. .album #anuncio1 .ajustes1 h4{
  34.  
  35. 	text-align:center;
  36. 	font-weight:bold;
  37.  
  38.  
  39.  
  40.  
  41. }
  42.  
  43.  
  44.  
  45. .album #anuncio #imagenprimera img{
  46. 	margin-right:70%;
  47. 	width:30%;
  48.  
  49.  
  50.  
  51.  
  52.  
  53. }
  54.  
  55.  
  56.  
  57. .album #anuncio1 .ajustes1{
  58. 	margin-left:33%;
  59. 	width:67%;
  60. 	border-top-width:0.5em;
  61. 	border-right-width:0.5em;
  62. 	border-left-width:0.5em;
  63. 	border-bottom-width:0.5em;
  64. 	border-top-color:black;
  65. 	border-right-color:black;
  66. 	border-left-color:black;
  67. 	border-bottom-color:black;
  68. 	border-top-style: solid;
  69. 	border-bottom-style: solid;
  70. 	border-right-style: solid;
  71. 	border-left-style: solid;
  72.  
  73. }
En línea
HAS DICHO ALGO NENAAAAAA?!
cassiani


Desconectado Desconectado

Mensajes: 978


« Anterior | Próximo »


Ver Perfil WWW
Re: Quiero poner un <div> al lado de otro <div>
« Respuesta #1 en: 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:
<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:
.album{
   text-align: center;
   padding: 10px;
}

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


Desconectado Desconectado

Mensajes: 3.412


ASMático


Ver Perfil WWW
Re: Quiero poner un <div> al lado de otro <div>
« Respuesta #2 en: 2 Agosto 2016, 00:11 am »
También display:inline-flex. Te alineará los bloques arriba.

Código
  1. <html>
  2.     <head>
  3.         <style>
  4.             .parent > div{
  5.                 display: inline-flex;
  6.             }
  7.         </style>
  8.     </head>
  9.  
  10.     <body>
  11.         <div class="parent">
  12.             <div><pre>A
  13. B
  14. C
  15. D
  16. E
  17. F
  18. G
  19. H
  20. I</pre></div>
  21.             <div><pre>N
  22. J
  23. K
  24. L
  25. M
  26. O
  27. P
  28. Q
  29. R
  30. S</pre></div>
  31.             <div><pre>T
  32. U
  33. V
  34. W
  35. X
  36. Y
  37. Z</pre></div>
  38.         </div>
  39.     </body>
  40. </html>
En línea
Code0x66 - Blog de hacking & programación
RevolucionVegana


Desconectado Desconectado

Mensajes: 477



Ver Perfil
Re: Quiero poner un <div> al lado de otro <div>
« Respuesta #3 en: 2 Agosto 2016, 18:57 pm »
Ya lo he solucionado MUCHAS GRACIAS A LOS DOS!!!!!!!

Un saludo colegas
En línea
HAS DICHO ALGO NENAAAAAA?!
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Mover un form al lado de otro.
Programación Visual Basic 		ciruit 3 2,461 Último mensaje 28 Diciembre 2005, 17:24 pm
por ciruit
Form al lado de otro
Programación Visual Basic 		bautistasbr 3 1,916 Último mensaje 29 Julio 2006, 18:19 pm
por _Sergi_
poner tu nombre al lado del reloj .bat
Scripting 		Darioxhcx 1 3,376 Último mensaje 14 Septiembre 2008, 01:27 am
por aaronduran2
PASA AL OTRO LADO DEL RIO! « 1 2 3 4 »
Desafíos - Wargames 		-N4N0- 33 29,845 Último mensaje 12 Julio 2010, 16:43 pm
por TRACKER_PLOZT
como concatenar un div a lado de otro?
Desarrollo Web 		flacc 3 8,316 Último mensaje 13 Marzo 2011, 04:49 am
por flacc
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines