Блог

я использую target (тот же класс и идентификатор), поэтому всякий раз, когда пользователь нажимает на слово, рядом друг с другом появляются 3 изображения, однако они появляются поверх друг друга, я пробовал display:inline, а также display:inline-block и float: ни один из них не работал (и нет, я не могу использовать javascriptчтобы сделать это ):) вот пример моего кода, если нужен весь документ, дайте мне знать

      <div class="nav">
        <ul>
            <li>Acceuil</li>
            <li>Inscription</li>
            <a class="states" href="#link1"><li>States</li></a>
        </ul>
        
    </div>
        
        <a target="bas" href="C:UsersAsusDesktopFroudHangmanindex.html"><img id="link1"  src="travel.png"></a>
        <a target="bas" href="C:UsersAsusDesktopFroudHangmanindex.html"><img id="link1"  src="hh.png" ></a>
    </div>    
   
    <iframe name="bas"   width="100%" height="fit-content" style="margin-top: 200px;" ></iframe>

    li{
    list-style: none;
    display: inline;
    font-size: 30px;
    padding-right: 5px;
    transition: font-size 2s;
    animation-duration: 4s;
    animation-name: anim;
}
li:hover{
   font-size: 50px;
   
}
ul{
    text-align: center;
    align-items: center;
}
.nav{
    background-color: black;
    color: white;
    width: 100%;
    align-items: center;
    height: 50px;
}
#link1{
    display: none;
}
#link1:target{
    display: inline-block;
    width: 300px;
    height: 200px;
    
}
a{
    text-decoration: none;
};

@keyframes anim{
    from{background-color: white;}
    to{background-color: teal;}
}
body,html{
    height: 100%;
}
.img2{
    margin-left: 50%;
}
 

Вместо того чтобы передавать один и тот же идентификатор для двух изображений, вы должны передать его одному div элементу. И затем вы можете обернуть в него свои изображения.

 li {
  list-style: none;
  display: inline;
  font-size: 30px;
  padding-right: 5px;
  transition: font-size 2s;
  animation-duration: 4s;
  animation-name: anim;
}

li:hover {
  font-size: 50px;
}

ul {
  text-align: center;
  align-items: center;
}

.nav {
  background-color: black;
  color: white;
  width: 100%;
  align-items: center;
  height: 50px;
}

#link1 {
  display: none;
}

#link1:target {
  display: inline-block;
  width: 300px;
  height: 200px;
}

a {
  text-decoration: none;
}

;
@keyframes anim {
  from {
    background-color: white;
  }
  to {
    background-color: teal;
  }
}

body,
html {
  height: 100%;
}

.img2 {
  margin-left: 50%;
} 

 <div class="nav">
  <ul>
    <li>Acceuil</li>
    <li>Inscription</li>
    <a class="states" href="#link1">
      <li>States</li>
    </a>
  </ul>

</div>
<div id="link1">
  <a target="bas" href="C:UsersAsusDesktopFroudHangmanindex.html"><img style="width:100px" src="https://i.pinimg.com/originals/4b/6f/ec/4b6fec352ad65acf6c1265201432dfa1.jpg"></a>
  <a target="bas" href="C:UsersAsusDesktopFroudHangmanindex.html"><img style="width:100px" src="https://i.pinimg.com/originals/33/32/6d/33326dcddbf15c56d631e374b62338dc.jpg"></a>
</div>

<iframe name="bas" width="100%" height="fit-content" style="margin-top: 200px;"></iframe>