Tengo un problema con el renderizado HTML/CSS.
Cómo es posible que de éste código:
<div class="gal-preview">
<div class="thumbnail">
<a href="#" class="link-thumbnail">
<img src="img/submissions/01/over_the_hedge.jpg">
<div class="info">
<div class="title">The hedge must be jumped!</div>
<a>AAAA</a>
</div>
</a>
</div>
</div>
Me renderice esto:
Es introducir el link AAAA que tengo de prueba, y todo se descuadra de manera anormal.
El CSS es el siguiente:
.gal {
padding: 5px;
.gal-preview {
width: 20%;
height: 15vw;
float: left;
padding: 5px;
.thumbnail {
position: relative;
height: 100%;
background-color: #6a6a6a;
a.link-thumbnail {
.position(absolute, 0, 0, 0, 0);
display: block;
text-decoration: none;
img {
max-width: 100%;
max-height: 100%;
.position(absolute, 50%, initial, initial, 50%);
transform: translate(-50%, -50%);
}
.info {
padding: 10px;
.position(absolute, 0, 0, 0, 0);
.title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #f0f0f0;
}
.author {
.position(absolute, initial, 10px, 10px, 10px);
}
}
}
}
}
&::after {
.afterClear;
}
}
.position(@position, @top: initial, @right: initial, @bottom: initial, @left: initial) {
position: @position;
top: @top;
right: @right;
bottom: @bottom;
left: @left;
}
.afterClear {
content: '';
display: block;
clear: both;
}
Añado JSFIDDLE con únicamente la primera celda de prueba con este código: https://jsfiddle.net/vo3d6zk9/
El objetivo de tener un a
dentro del otro, es que si hago clic en toda la celda, exceptuando el AAAA
que sería otro enlace, me llevara al detalle de esa imagen. No tengo problemas en colocar el enlace AAAA
fuera, pero me ha dejado atónito y quiero saber básicamente porque rederiza de esta manera.
<a>
dentro de otro<a>
provoca ese desorden.