2

Estaba haciendo un diseño para comentarios y me dí cuenta de que hay un error cuando hay más de un comentario, y no importa que los ponga en diferentes contenedores, el problema es que crea un margen a la izquierda. El contenedor de los comentarios (.comentarios) tenía únicamente display: inline-block;, lo que generaba conflicto con los elementos dentro del comentario, haciéndo el comentario más pequeño y convirtiendo en inline a el nombre y hora del usuario.

Ejemplo sin inline-block

introducir la descripción de la imagen aquí

Ejemplo con inline-block

introducir la descripción de la imagen aquí

.comment {
  display: block;
}

.comment img {
  float: left;
  vertical-align: middle;
  width: 45px;
  height: 45px;
  margin-right: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.comment div {
  color: #6b6b6b;
  word-break: 100%;
  list-style: none;
  font-size: 15px;
}

.comment>div>span {
  font-size: 16px;
  color: #111111;
  font-weight: 600;
  display: block;
}

.comment>div>span>i {
  color: #8998a0;
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
}
<span class="comment">
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEB2FtrvN7ET73eX_u1lJVskBtXnClab0BsilHAJhFXT_0bNcOgA">
  <div>
    <span>Camila Cabello <i>Hoy, hace dos horas</i></span> She doesn't cry anymore
  </div>
</span>

3
  • Oh, lo siento, estaba editando y me había ido a hacer algo y se publicó, ahora lo arreglo. el 29 mar. 2018 a las 17:31
  • 1
    @KacosPro Ya hice las ediciones, disculpa el 29 mar. 2018 a las 17:36
  • Mucho mas claro! Gracias
    – user22721
    el 29 mar. 2018 a las 17:44

1 respuesta 1

4

El float:left que tienes en la clase comment es el que genera ese margen en el segundo comentario, para solucionarlo puedes poner el siguiente codigo

.comment{
    clear:left;
    display:block;
}
1
  • Funciona bien, y no presenta ningún error con el vertical-align, de hecho queda mejor así. el 29 mar. 2018 a las 22:48

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.