0

Tengo un par de divs y quisiera mostrarlos uno después del otro. El caso es que he leído que esto se puede hacer usando display: inline; y con el float: left; Si bien en otras situaciones sí que me ha salido usando lo que acabo de explicar, en esta ocasión no me sale.

Lo que quisiera hacer es poner el speech bubble después y no abajo: https://gyazo.com/b3c39be99e2d0c1ef62566441664c711

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.cuerpoUsuario {
	display: inline;
	width: 50%;
}

/* Etiqueta IMG que contiene a la imagen redonda del usuario */
.imagenUsuario {
	border-radius: 50%;
	height: 75px;

	margin: 20px 0 0 20px;
}	

.spanNombreUsuario {
	margin-left: 20px;
	color: gray;
	font-size: 14px;
}

.localizacion {
	font-size: 12px;
	margin-left: 20px;
}

.nivelColaboracion {
	margin: 7px 0 7px 0;
	margin-left: 20px;
	font-size: 12px;
	font-weight: bold;
	color: gray;
}

.cantidadOpiniones {
	margin-left: 20px;
	font-size: 12px;
}
.cantidadOpiniones span {
	padding-bottom: 5px;
	display: table-cell;
	vertical-align: middle;
}

.nivelColaboracion > * {
	vertical-align: middle;
}
.nivelColaboracion img {
	margin-left: 5px;
}

.cantidadOpiniones > * {
	vertical-align: middle;
}
.cantidadOpiniones img {
	margin-right: 5px;
}

.burbujaComentario {
	display: inline;
	width: 50%;
}

#speech-bubble {
	display: inline;
	float: left;
   width: 120px; 
   height: 80px; 
   background: #5ac4ed;
   position: absolute;
   left:100px;
   /*-moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px;*/
}
#speech-bubble:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid #5ac4ed;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<div class="cuerpoUsuario">
<div class="otro">
	<div class="imagenRedondaUsuario">
		<img src="usuario.jpg" class="imagenUsuario"></img>
		<div class="nombreUsuario"><span class="spanNombreUsuario">Tamara</span></div>
	</div>
	<div class="localizacion">Milano, Italy</div>
</div>
<div class="recuadroBajo">
	<div class="nivelColaboracion">Colaborador de nivel <img src="https://static.tacdn.com/img2/badges/20px/lvl_02.png"></div> 
	<div class="cantidadOpiniones">
		<img src="https://static.tacdn.com/img2/badges/20px/rev_03.png" class="iconoOpiniones"></img>3 opiniones</div>
</div>
</div>

<div class="burbujaComentario"><div id="speech-bubble"></div></div>

</body>
</html>

¿Qué debería modificar para hacerlo?

8
  • Hola Richard, bienvenido. Tienes muchos div. Puedes explicar al lado de cual quieres poner el speech bubble?
    – lois6b
    el 4 abr. 2017 a las 11:59
  • Gracias, lo que quisiera sería poner el speech bubble a la derecha en vez de abajo. Tal cual está, pero en vez de que el speech bubble esté abajo, simplemente que esté a la derecha. el 4 abr. 2017 a las 12:07
  • Si, a la derecha. pero a la derecha de "opiniones"? o a la derecha de "tamara" ? o de donde?
    – lois6b
    el 4 abr. 2017 a las 12:08
  • Perdona por ser poco concreto, a la derecha de Tamara. el 4 abr. 2017 a las 12:14
  • Que quieres, una cosa así? jsfiddle.net/1t8wdq2d
    – Lorthas
    el 4 abr. 2017 a las 12:28

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.