制作响应式多个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 查询但没有区别。为了 post 图片我准备了 JSFiddle demo.

下面是演示：https://jsfiddle.net/vxu7rvv7/

我在这里尝试了其他线程的一些解决方案，但我无法让它工作。事实上，媒体屏幕属性来自另一个线程..

谁能帮我一点忙？

Answer 1

首先您需要将#wrapper 的宽度更改为自动，并将图像从内联更改为块，所以基本上您的媒体屏幕 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;

    }
}

PS

don't use the same id for multiple element but use class instead #img-row to .img-row and remove bottom:1x; from .wp-caption-text

Updated 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>

制作响应式多个div

Making responsive multiple divs

html

css

responsive