如何使以下 div 响应 [关闭]

Question

I want to make this responsive **我用 html 和 css 设计了这个，我想让这个 div 响应...我该怎么做？

我尝试使用引导列，但它不起作用

如果背景图像的高度固定，请告诉我如何使背景响应。

.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

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>

Answer 2

不幸的是，如果不查看您的编码方式，很难看到问题，您能否复制您的代码以便我们查看您的设置方式？

但是，我会试一试。我将假设这四辆车在一个包装器 div 中，并且当窗口变小时，您希望车辆的图像彼此下方.. 像这样：

/* 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%;
   }
}

将.carImage 更改为您为每个汽车图像设置的任何类 - 但再一次，除非您将代码粘贴进去，否则我无法说出确切的问题。如果这无助于复制代码，我会尝试再次。

编辑：查看您发送的代码后：

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

我不会像你那样使用position: absolute;，我个人不经常使用它，所以也许这不会有帮助，但也许它会 - 只是你如何可能的一个简单示例去做吧。我已经更改了图像源，仅作为示例，希望对您有所帮助...