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.
¿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.
¿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?
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.w3schools
está bien posicionada en Google y tiene algo bueno que son losTry 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.