Question

我有一个页面，我显示4个图像 - 每行2个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;

    }
}

PS

不要对多个元素使用相同的id，而是使用类而不是＃img-row到.img-row并删除bottom：1x;来自.wp-caption-text

Updated JSFIDDLE

Answer 2

Best way will be using some responsive framework. Replace the css I hope it will make you images responsive for all devices.

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

And use this 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

的href

Answer 3

尝试使用max-width：100％，和图像行有两个图像，所以也许图像需要最大宽度:( <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

3 个答案: