CSS: saut de ligne avant l'élément si dernier rang

J'ai des images en tant qu'éléments en bloc dans une galerie en forme de grille et à certains points du code il y a des éléments cachés qui sont essentiellement des ancres qui servent de navigation à travers différentes années ont été prises. Le problème est lorsque la première image de l'année suivante est placée en tant que premier élément d'une rangée, les éléments d'ancrage reste derrière dans une rangée précédente. Ce que je veux faire est de coller l'élément d'ancrage à l'élément suivant (image) afin qu'il casse avec lui.CSS: saut de ligne avant l'élément si dernier rang

Je suis ouvert à CSS et JS. Je me rends compte qu'il existe de meilleures façons de le faire, mais le changement de code HTML n'est pas une option car il fait partie d'une structure plus grande et même des modifications mineures feraient probablement échouer d'autres scripts.

img { 
 
    display: inline-block; 
 
    width: 120px; 
 
    height: 250px; 
 
} 
 

 
div { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 0; 
 
    height: 0; 
 
    visibility: hidden; 
 
}

<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <button href="#2015">2015</button> 
 
    <button href="#2016">2016</button> 
 

 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <div id="2015"></div> 
 
    <!-- Anchor element --> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <div id="2016"></div> 
 
    <!-- Anchor element --> 
 
</body> 
 

 
</html>

Source

2017-06-01 nemoneminem

essayer ce code

img { 
 
    display: inline-block; 
 
    width: 120px; 
 
    height: 250px; 
 
} 
 

 
div { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 0; 
 
    height: 0; 
 
    visibility: hidden; 
 
}

<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 
    <a href="#2015">2015</a> 
 
    <a href="#2016">2016</a><br/> 
 

 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."><br/> 
 
    <div id="2015"></div> 
 
    <!-- Anchor element --> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."> 
 
    <img src="..." alt="..."><br/> 
 
    <div id="2016"></div> 
 
    <!-- Anchor element --> 
 
</body> 
 

 
</html>

Source

2017-06-01 02:47:15

Cela provoquerait une rupture sur chaque point d'ancrage. Ce que j'essaie de faire est exactement ceci, mais seulement si l'élément d'ancrage est le dernier en ligne. – nemoneminem

Image dernière balise html utiliser
et la ligne suivante. –

1. Même problème. Il y aurait une pause même si l'ancre n'est pas le dernier élément d'affilée. 2. Comme je l'ai dit, changer le HTML n'est pas une option. Encore merci. – nemoneminem

CSS: saut de ligne avant l'élément si dernier rang

Répondre

Questions connexes