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

 

 


Tema destacado: Sigue las noticias más importantes de seguridad informática en el Twitter! de elhacker.NET


+  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,446 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

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,135 Último mensaje 28 Diciembre 2005, 17:24 pm
por ciruit
Form al lado de otro
Programación Visual Basic
bautistasbr 3 1,708 Último mensaje 29 Julio 2006, 18:19 pm
por _Sergi_
poner tu nombre al lado del reloj .bat
Scripting
Darioxhcx 1 3,163 Ú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 28,452 Último mensaje 12 Julio 2010, 16:43 pm
por TRACKER_PLOZT
como concatenar un div a lado de otro?
Desarrollo Web
flacc 3 7,977 Último mensaje 13 Marzo 2011, 04:49 am
por flacc
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines