wie man folgende div reagiert

Question

I want to make this responsive ** Ich habe dies in HTML und CSS entworfen und ich möchte diese div reagieren ... Wie kann ich tun?

Ich habe versucht, durch Bootstrap-Spalten verwenden, aber es nicht

Und auch mir funktioniert sagen, wie Hintergrund ansprechbar zu machen, wenn es ein Hintergrundbild von fester Höhe hat.

.im1 
 
{ 
 
    /*padding: 10px;*/ 
 
    /*margin-left: 60px;*/ 
 
    margin-top: 10px; 
 
    z-index: 1; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin-right: -80px; 
 
} 
 

 
.background1 { 
 
    background: url("../car/car_web.jpg"); 
 
    /*border: 2px solid black;*/ 
 
    width:1380px; 
 
    height:350px; 
 
    background-repeat: no-repeat; 
 
    padding: 50px; 
 
    padding-top: 10px; 
 
    padding-left: 130px; 
 
    left: 0px; 
 
    /*position: absolute;*/ 
 
    /*top: 20px;*/ 
 
    margin-left: -155px; 
 
    
 
}

<section id="COMPARE" style="margin-left: 100px;"> 
 
    <div class="container"> 
 
    <div class="col-md-12 background1"> 
 
     <label class="ll"> 
 
     <center><small><strong>Car Comparison lorims info</strong></small> 
 
     <h3>Compare Cars</h3> 
 
     </center> 
 
     </label><br> 
 
      
 
<div class="im1 col-md-3" style="position:relative; margin-left:40px;"> 
 
       <img class="" src="car/1.jpg" width="200px;" height="120px;" style=" position:absolute; z-index=1; top:0px; left:80px;"> 
 
       <img src="icon/vs.png" width="55px" height="55px" style="position:absolute; top:30px; left:260px; z-index:3;"> 
 
       <img class="" src="car/2.jpg" width="200px;" height="120px;" style=" position:absolute; z-index=1; top:0px; left:300px;"> 
 
       <img src="icon/vs.png" width="55px" height="55px" style="position:absolute; top:30px; left:480px; z-index:3;"> 
 
       <img class="" src="car/3.jpg" width="200px;" height="120px;" style=" position:absolute; z-index=1; top:0px; left:520px;"> 
 
       <img src="icon/vs.png" width="55px" height="55px" style="position:absolute; top:30px; left:700px; z-index:3;"> 
 
       <img class="" src="car/4.jpg" width="200px;" height="120px;" style=" position:absolute; z-index=1; top:0px; left:740px;"> 
 
      </div> 
 
      
 
      
 
      <div class="col-md-12 de" id="compare"> 
 
      <button type="submit" class="btn btn-primary12 btn-lg outline1 " name="login">COMPARE CARS</button></span> 
 
      <br> 
 
      <br> 
 
      <small><strong>Or <a href="#">Click here for custom comparison</a></strong></small> 
 
      </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

Es ist sehr schwierig, das Problem zu sehen, ohne zu sehen, wie Sie codiert haben es unfortu Können Sie Ihren Code kopieren, damit wir sehen können, wie Sie die Dinge eingerichtet haben?

Allerdings werde ich es versuchen. Ich gehe davon aus, dass die vier Fahrzeuge in einem Wrapper div sind und dass Sie wollen, dass die Bilder der Fahrzeuge untereinander fallen, wenn das Fenster kleiner wird .. etwas wie folgt aus:

/* Standard size */ 
.carImage{ 
    width: 25%; 
} 

/* Tablet Size */ 
@media only screen and (max-width: 768px) { 
    .carImage{ 
     width: 50%; 
    } 
} 

/* Mobile Size */ 
@media only screen and (max-width: 480px) { 
    .carImage{ 
     width: 100%; 
    } 
} 

Ändern der .carImage zu welcher Klasse auch immer Sie für jedes Auto Bild haben - aber wieder kann ich das genaue Problem nicht sagen, es sei denn, Sie fügen Ihren Code ein. Wenn das nicht hilft, kopieren Sie den Code und ich werde es erneut versuchen.

EDIT: Nach dem Blick auf den Code gesendet Sie:

https://jsfiddle.net/o05yvL1h/3/

ich Sie habe es nicht getan position: absolute; in der Art und Weise verwenden würde, ich es nicht sehr oft verwenden persönlich so vielleicht diese wird nicht helfen, aber vielleicht wird es - nur ein kurzes Beispiel dafür, wie Sie damit umgehen könnten. Ich habe die Bildquellen nur für ein Beispiel geändert, hoffe es hilft ...

Answer 2

https://jsfiddle.net/o05yvL1h/
https://jsfiddle.net/o05yvL1h/2/

div { 
 
    display: inline-block; 
 
    width: 23%; 
 
    width: calc(25% - 1em); 
 
    margin: 1em .5em; 
 
    background: silver; 
 
    line-height: 4em; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
div + div:after { 
 
    content: "VS"; 
 
    line-height: 2em; 
 
    width: 2em; 
 
    margin: -1em; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    background: blue; 
 
    color: white; 
 
    top: 50%; 
 
    left: -.5em; 
 
} 
 

 
@media all and (max-width: 320px) { 
 
    div { 
 
    display: block; 
 
    width: auto; 
 
    } 
 
    
 
    div + div:after { 
 
    top: -.5em; 
 
    left: 50%; 
 
    } 
 
}

<div> 
 
    1 
 
</div><div> 
 
    2 
 
</div><div> 
 
    3 
 
</div><div> 
 
    4 
 
</div>