#div {}

img {
  height: 200px;
}

#img1 {
  float: left;
}

#img2 {
  float: right;
}

#img3 {
  float: right;
}
<div id="div">

  <img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">

  <img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">

  <img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">

</div>

Actuellement, lorsque vous réduisez l'écran horizontalement, les images commencent à s'empiler verticalement, ce que je ne veux pas, je veux qu'elles restent toutes sur la même ligne horizontale.

Je cherche comment faire les choses suivantes:

  1. Faire disparaître une image lorsqu'elle commence à chevaucher une autre image.

  2. Faites pousser les images vers la droite au-delà de la barre de défilement verticale lorsque les images commencent à se chevaucher.

La raison pour laquelle je demande les deux est que j'ai maintenant deux projets où chacun nécessite l'un de ces deux et je ne sais pas comment le faire: P

Je voudrais également éviter @media uniquement écran et (max-width: --- px) si possible.

2
J. Doe 23 mai 2018 à 08:31

6 réponses

Meilleure réponse

Vous devez ajouter un div distinct pour chaque image et l'organiser par élément display: flex. Utilisez également margin pour aligner le contenu dans le div flex.

#div {
  display: flex;
}

.new {
  max-height: 200px;
}

.left {
  margin-right: auto;
}

img {
  max-width: 100%;
  max-height: 200px;
}

@media (max-width: 768px) {
.hidden-xs {
  display:none;
}
}
<div id="div">

  <div class="new left">
    <img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
  </div>

  <div class="new hidden-xs">
    <img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
  </div>

  <div class="new">
    <img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
  </div>

</div>
1
vishnu 23 mai 2018 à 06:38

Essayez ce code:

    ul.img {
      margin: 0;
      padding: 0;
      white-space: nowrap;
      width: 500px;
      overflow-x: auto;
    }
    
    ul.img li {
      display: inline-block;
      width: 200px;
      height: 200px;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="demonstration.css" type="text/css">
        
    </head>
    
    <body>
        <ul class="img">
      <!-- Inline styles added for demonstration purposes only. -->
      <li style="background-color: #000"></li>
      <li style="background-color: #cdc"></li>
      <li style="background-color: #fed"></li>
    </ul>
    </body>
    </html>
0
VijAsh 23 mai 2018 à 05:55

Essayez ce code, et modifiez la hauteur de votre image en fonction des besoins.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="demonstration.css" type="text/css">
  <title>Demo</title>
  <style>
    #div {
        display: flex;
        flex-wrap: wrap;
    }
    #div img{
        width: 33.33%;
        height: 200px;
    }

  </style>
</head>

<body>

  <div id="div">

    <img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">

    <img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">

    <img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">

  </div>
</body>

</html>
0
Ashique Hussain Ansari 23 mai 2018 à 05:56

Le problème est que vous utilisez un flotteur pour le positionnement.

Les flotteurs passeront automatiquement à une nouvelle ligne lorsque leurs conteneurs deviendront trop petits.

Vous pouvez soit définir la taille du conteneur d'image sur une largeur de 600 px sans redimensionnement dans laquelle vos images resteraient en place lorsque la fenêtre deviendrait plus petite.

Ou vous pouvez utiliser la position fixe, ce que je choisirais.

    #img1  {
        position: fixed;
        width:200px;
        left: 0px;
        top: 0px;
        border: 0px;
        padding: 0px;}
    #img2 {
        position: fixed;
        width:200px;
        left: 200px;
        top: 0px;
        border:0px;
        padding: 0px;}
    #img3 {
        position: fixed;
        width:200px;
        left: 400px;
        top: 0px;
        border: 0px;
        padding: 0px;}
0
TrevorLee 23 mai 2018 à 06:08

Essayez ce code

#div::after {
  display: table;
  content: "";
  clear: both;
}

#div img {
  float: left;
  width: 33.33%;
  max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="demonstration.css" type="text/css">
  <title>Demo</title>
</head>

<body>

  <div id="div">

    <img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">

    <img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">

    <img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">

  </div>

</body>

</html>
0
Swooshant 23 mai 2018 à 05:39

Si vous ne vous souciez pas du redimensionnement de l'image, définissez le div avec une largeur minimale d'une somme totale de px des largeurs d'image. De cette façon, vous avez moins de conteneurs.

0
TrevorLee 5 juil. 2018 à 13:09