使響應多個div

Question

我在頁面上顯示4張圖像-每行2 x 2。 我現在正在嘗試在移動設備上打開頁面時使它們響應，但是我不知道如何做到這一點。

所以我有這個HTML

<div id="wrapper">
  <div id="main-content">
    <div id="img-row" >
      <a href=""><button  class="button"> Ask   </button>   </a>
    </div>
    <div id="img-row">
        <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a>
        <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a>
    </div>
    <div id="img-row">
       <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 3</figcaption></a>
       <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 4</figcaption></a>
    </div>
  </div>
</div>

和CSS

#wrapper {
    margin: 0 auto;
    width: 960px;
}
#main-content {
    background: #fff;
    padding: 7px 7px 7px 7px;
    width: 946px;
    min-height: 400px;
    float: left;
}

.images {
  text-align: center;
  padding: 15px 15px;
  position: relative;
  vertical-align: middle;
  display: inline;
  width: 430px;
  margin: 10px 0;
}
#img-row {
  display: block;
  margin-top: -15px;
  position: relative;
  height: auto;
  max-width: auto;
  overflow-y: hidden;
  overflow-x: auto;
  word-wrap: normal;
  white-space: nowrap;
  text-align: center;
}
#img-row > a {
  position: relative;
}
#img-row:after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.button {
  display: block;
  background-color: #bbb;
  margin: 10px;
}
button.button {
  width: 570px;
  margin-left: 182px;
  height: 40px;
  font-size: 30px;
}
.wp-caption-text {
  display: block;
  position: absolute;
  width: 100%;
  color: white;
  left: 0;
  top: -30px;
  bottom: 1px;
  padding: 5px;
  font-weight: bolder;
  z-index: 2;
  font-size: 40px;

}

現在，我嘗試添加CSS media screen查詢，但是沒有區別。 為了發布圖像，我准備了JSFiddle演示。

這是演示的樣子： https : //jsfiddle.net/vxu7rvv7/

我在這里嘗試了其他線程的一些解決方案，但無法正常工作。 實際上，媒體屏幕屬性來自另一個線程。

有人可以幫我一下嗎？

Answer 1

首先，您需要將#wrapper的寬度更改為auto，並將圖像從內聯更改為塊，因此基本上，您的媒體屏幕CSS應該如下所示：

 @media screen and (max-width: 480px) {
   #wrapper {
      height: auto; overflow: hidden;
      width: auto;
   }
   .images {
     display: block;
     width:100%;
     padding: 0;
   }
   #main-content {     
       float: none;
       margin-right:0;
       width:auto;
    }
    button.button {
      width: 100%;
      margin: 15px 0;
    }
    .img-row > a {
      display: block;
    }
    .wp-caption-text {
        /* this will center the title in the vertically*/
        top: 50%;
        transform: translateY(-50%);
        /*------------------------------------------*/  
      padding: 0;

    }
}

聚苯乙烯

不要對多個元素使用相同的ID，而是使用類＃img-row到.img-row並刪除bottom：1x; 來自.wp-caption-text

更新了JSFIDDLE

Answer 2

最好的方法是使用一些響應式框架。 更換CSS，希望它能使您對所有設備的圖像都靈敏。

<div id="wrapper">
  <div id="main-content">
    <div id="img-row" >
      <a href=""><button  class="button"> Ask   </button>   </a>
    </div>
    <div id="img-row">

        <div class="img-item">
            <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a>
        </div>
        <div class="img-item">
            <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a>
        </div>

    </div>
    <div id="img-row">
       <div class="img-item">
            <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a>
        </div>
        <div class="img-item">
            <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a>
        </div>
    </div>
  </div>
</div>

並使用此CSS

#wrapper {
    margin: 0 auto;
    max-width: 960px;
}

#main-content {
    background: #fff;
    padding: 7px;
    width: 100%;
    min-height: 400px;
    box-sizing: border-box;
}

.img-item {
    padding: 15px 15px;
    width: 50%;
    margin: 10px 0;
    float: left;
    box-sizing: border-box;
    position: relative;
}

.images {
    width: 100%;
    position: relative;
    z-index: 50;
}

#img-row > a {
    position: relative;
}

#img-row {
    overflow: hidden;
}

#img-row:after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.button {
    display: block;
    background-color: #bbb;
    margin: 10px;
}

button.button {
    width: 250px;
    margin: 25px auto;
    height: 40px;
    font-size: 30px;
}

.wp-caption-text {
    display: block;
    position: absolute;
    width: 100%;
    color: #ffffff;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 700;
    z-index: 200;
    font-size: 40px;
    transform: translateY(-50%)
}

@media screen and (max-width: 767px) {
    .img-item {
        padding: 7px;
        width: 100%;
    }
}

JSFiddle

Answer 3

嘗試使用max-width：100％，並且圖像行有兩個圖像，因此圖像可能需要為max-width：（<50％）嗎？

 #wrapper { margin: 0 auto; max-width: 960px; } #main-content { background: #fff; padding: 7px 7px 7px 7px; max-width: 946px; min-height: 400px; float: left; } .images { vertical-align: middle; padding: 0px 15px 15px 15px; max-width: 45%; margin: 10px 0; } #img-row { display: block; margin-top: -15px; position: relative; height: auto; max-width: auto; overflow-y: hidden; overflow-x: auto; word-wrap: normal; white-space: nowrap; text-align: center; } #img-row > a { position: relative; } #img-row:after { content: ""; position: absolute; display: block; left: 0; top: 0; max-width: 100%; height: 100%; z-index: 1; } .button { display: block; background-color: #bbb; margin: 10px; } button.button { max-width: 570px; margin-left: 182px; height: 40px; font-size: 30px; } .wp-caption-text { display: block; position: absolute; width: 100%; color: white; left: 0; top: -30px; bottom: 1px; padding: 5px; font-weight: bolder; z-index: 2; font-size: 40px; } 

 <div id="wrapper"> <div id="main-content"> <div id="img-row" > <a href=""><button class="button"> Ask </button> </a> </div> <div id="img-row"> <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a> <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a> </div> <div id="img-row"> <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 3</figcaption></a> <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 4</figcaption></a> </div> </div> </div>