Question

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

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

如果它有一个固定高度的背景图像，还告诉我如何使背景响应。

.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;，我不经常亲自使用它，所以也许这不会有帮助，但也许它将 - 只是一个快速举例说明如何实现它。我只是为了一个例子改变了图像来源，希望它有所帮助...

如何使以下div响应

2 个答案: