Nunca he entendido porque hay profesores que no preparan la clase antes de impartirla!!
Inicialmente float era para acomodar una imagen al lado de un texto (párrafos). Uno de los propósitos de display es dejar de utilizar float.
Lo único que causa float es más problemas!! Tan fácil es hacer algo como esto:
<ul class="ul-cat">
<li class="li-cat">
<div class="container-img">
<img src="...root" />
</div>
<header class="title-container">
<h2 class="title-cat">Tipo de Gato</h2>
</header>
</li>
<li class="li-cat">
<div class="container-img">
<img src="...root" />
</div>
<header class="title-container">
<h2 class="title-cat">Tipo de Gato</h2>
</header>
</li>
<li class="li-cat">
<div class="container-img">
<img src="...root" />
</div>
<header class="title-container">
<h2 class="title-cat">Tipo de Gato</h2>
</header>
</li>
<li class="li-cat">
<div class="container-img">
<img src="...root" />
</div>
<header class="title-container">
<h2 class="title-cat">Tipo de Gato</h2>
</header>
</li>
</ul>
.ul-cat {
width:100%;
margin: 0 auto;
text-align: center;
}
.li-cat {
display: inline-block;
max-width: 23%;
width: 100%;
margin: 0 1%;
margin: 0 auto;
}
.container-img, .title-container {
width: 100%;
}
.img {
width: 100%;
}
Suponiendo que es una categoría o una sección importante "el nombre de cada gato", yo lo acomodaría mejor en algún h2, h3, h4, h5 o h6 y dentro de un header!!
