1

Tengo el siguiente div con info y un span adentro como puedo hacer para que ese span este pegado al top del div para que se vea como en la imagen:

introducir la descripción de la imagen aquí

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container" style="margin-top: 30px;">
 <div class="row">
      <div class="col xl12 l12 m12 s12 center">
           <div class='chip green accent-2' style="font-size: 25px;">20
                <div style="float: right; font-size: 12px !important">
                     <span>
                          <i class="tiny material-icons">arrow_upward</i>10
                     </span>
                </div>
           </div>
      </div>
 </div>
</div>

2 respuestas 2

3

Puedes cambiar la propiedad line-height del div contenedor asi:

div.chip {
  line-height: 1.2;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container" style="margin-top: 30px;">
 <div class="row">
      <div class="col xl12 l12 m12 s12 center">
           <div class='chip green accent-2' style="font-size: 25px;">20
                <div style="float: right; font-size: 12px !important">
                     <span>
                          <i class="tiny material-icons">arrow_upward</i>10
                     </span>
                </div>
           </div>
      </div>
 </div>
</div>

1
  • 1
    Sirvio perfecto
    – Juan
    el 31 oct. 2018 a las 23:44
0

Puedes ponerle position: relative a tu contenedor <div class='chip green accent-2' style="font-size: 25px;"> y position: absolute al contenedor <div style="float: right; font-size: 12px !important">. Para poder ajustarlo con top y right.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container" style="margin-top: 30px;">
 <div class="row">
      <div class="col xl12 l12 m12 s12 center">
           <div class='chip green accent-2' style="font-size: 25px;position: relative; padding-right: 2rem;">20
                <div style="float: right; font-size: 12px !important; position: absolute; top: -5px; right: 5px">
                     <span>
                          <i class="tiny material-icons">arrow_upward</i>10
                     </span>
                </div>
           </div>
      </div>
 </div>
</div>

Tu Respuesta

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

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