1

Tengo el código HTML

* {box-sizing: border-box;}
      /* Create four equal columns that floats next to each other */
      .column {
        float: left;
        width: 25%;
        padding: 5px;
      }
      /* Clear floats after the columns */
      .row:after {
        content: "";
        display: table;
        clear: both;
      }
      .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
      }
      .t1{
       color:#624662;
       text-align: center;
       font-size: 14px;
      }
      .t2{
       color:#fc8e04;
       text-align: center;
       font-size: 35px;
      }
      img{
        horizontal-align: middle;
     }
        
      /* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
  </head>
  <body>
    <br>
       <div class="row">
         <div class="column">
           <div style="text-align: center">
          <img src="URL" class="middle" width="50" height="50"></div>
           <div class="t1"><b>Plazas de movilidad</b></div>
           <div class="t2">+350</div>
           <div class="t1">Más de 350 plazas anuales de movilidad internacional.</div>
         </div>
         
         <div class="column">
           <div style="text-align: center">
           <img src="URL" class="middle" width="50" height="50"></div>
           <div class="t1"><b>Países</b></div>
           <div class="t2">37</div>
           <div class="t1">37 países con más de 120 universidades colaboradoras. </div>
         </div>
         
         <div class="column">
           <div style="text-align: center">
           <img src="URL" class="middle" width="50" height="50"></div>
           <div class="t1"><b>Dobles titulaciones</b></div>
           <div class="t2">26</div>
           <div class="t1">Posibilidad de obtener dobles titulaciones en 26 universidades.</div>
         </div>
         
         <div class="column">
         <div style="text-align: center">
         <img src="URL" class="middle" width="35" height="40"></div>
           <div class="t1"><b>Porcentaje</b></div>
           <div class="t2">+80%</div>
           <div class="t1">Más del 80% de los alumnos se van a su primera opción.</div>
         </div>
           
         </div>
    </body>
</html>

La idea es que aparezcan en 1 sola fila con 4 columnas, pero cuando lo incluyo en mi web me aparecen en 2 filas y 2 columnas.
introducir la descripción de la imagen aquí

¿Alguien sabe cómo puedo hacer para que aparezca correctamente? He probado el código en páginas externas y me aparece así, que es como lo quiero, pero no logro que en mi web salga igual. introducir la descripción de la imagen aquí

¿Qué tengo que hacer para que me salga como en la foto superior? ¿Tiene algo que ver con el CSS o con el tamaño del texto? No sé cómo modificarlo. No me deja modificar el width ni el padding de las preguntas, ¿puede ser un problema de espacio?

7
  • 1
    @fedorqui'SOdejadedañar' trato siempre de evitar referencias a w3schools. Están bien posicionados en Google, pero es un sitio plagado de malas prácticas y código no actualizado. El asunto fue discutido en Meta (en inglés) y hay algunas buenas respuestas al respecto. Es mejor referir al sitio oficial de cada lenguaje-framework-biblioteca.
    – A. Cedano
    Commented el 10 jul. 2020 a las 10:09
  • 1
    Interesante, @A.Cedano. Sé de la mala fama, si bien esa guía en concreto me resultó muy útil y creo que está bien curada. ¿Recomiendas alguna otra? getbootstrap.com/docs/3.4/css es la referencia oficial pero me parece más difícil de seguir
    – fedorqui
    Commented el 10 jul. 2020 a las 10:12
  • 1
    @fedorqui'SOdejadedañar' Para CSS, aparte de la documentación oficial, hay buenos tutoriales en CodePen y en CSS-Tricks, pero habría que buscarlos por temas específicos. Decidirse por una biblioteca como Bootstrap, a mi juicio, implicaría revisar el Overview completo para ver las posibilidades que da, cómo se hacen las cosas y ya para temas concretos puedes ver tutoriales en los sitios más arriba indicados o en otros.
    – A. Cedano
    Commented el 10 jul. 2020 a las 10:31
  • 1
    @A.Cedano qué bueno. Acabo pues de sugerir su inclusión en la wiki de [css] (donde hay varias referencias a W3schools, por cierto, además de demasiados enlaces).
    – fedorqui
    Commented el 10 jul. 2020 a las 10:38
  • 1
    @fedorqui'SOdejadedañar' claro, es que como w3schools está bien posicionada en Google y tiene algo bueno que son los Try It, mucha gente se engancha y he visto varios usuarios con experiencia que recomiendan enlaces a esa página. Yo leí ya hace tiempo comentarios negativos sobre la calidad del código y luego he visto pésimas prácticas en algunos ejemplos de código PHP que confirmaron lo que se decía en esos comentarios. Por eso en las respuestas o comentarios siempre refiero a los sitios oficiales o a ejemplos concretos de páginas que garanticen buenas prácticas.
    – A. Cedano
    Commented el 10 jul. 2020 a las 10:45

1 respuesta 1

2

A priori sustituiría en el CSS el float: left de la clase column por un display: inline-block, y cambiaría el width: 25% por un width: 24%. Habría que bajar el ancho de 25% a 24% (o menor) porque al haber 4 columnas suman el 100% del espacio de la view, después hay que sumar el ancho del padding, que por columna son 10px. En total en la fila estás ocupando un 100% + 40px, por eso se desplazan las columnas a otra fila.

Hay formas mucho más elegantes con el display: flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ pero tal vez te venga bien hacer solo estos pequeños cambios.

.column {
        display: inline-block;
        width: 24%;
        padding: 5px;
      }
1
  • Muchas gracias! Ya lo he solucionado
    – Maititis
    Commented el 10 jul. 2020 a las 17:35

Tu Respuesta

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

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