Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: RevolucionVegana en 1 Agosto 2016, 15:16 pm


Título: Quiero poner un <div> al lado de otro <div>
Publicado por: RevolucionVegana 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. }

Título: Re: Quiero poner un <div> al lado de otro <div>
Publicado por: cassiani 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;
}

Título: Re: Quiero poner un <div> al lado de otro <div>
Publicado por: ivancea96 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>

Título: Re: Quiero poner un <div> al lado de otro <div>
Publicado por: RevolucionVegana en 2 Agosto 2016, 18:57 pm
Ya lo he solucionado MUCHAS GRACIAS A LOS DOS!!!!!!!

Un saludo colegas


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines