Html 制作响应性多div

我有一个页面，其中我显示了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

media screen

query，但没有区别。为了发布图片，我准备了JSFIDLE演示

下面是它的外观演示：

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

---

有人能帮我一点忙吗？

首先，您需要将#wrapper的宽度更改为auto，并将图像从inline更改为block，因此基本上您的媒体屏幕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 to.img row并删除底部：1x；from.wp标题文本

---

首先，您需要将#wrapper的宽度更改为auto，并将图像从inline更改为block，因此基本上您的媒体屏幕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 to.img row并删除底部：1x；from.wp标题文本

---

最好的方法是使用一些响应性框架。替换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，我希望它能使您的图像对所有设备都有响应

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

尝试使用最大宽度：100%， 图像行有两个图像，所以图像可能需要最大宽度：（a）{ 位置：相对位置； } #img行：之后{ 内容：“； 位置：绝对位置； 显示：块； 左：0； 排名：0； 最大宽度：100%； 身高：100%； z指数：1； } .按钮{ 显示：块； 背景色：#bbb； 利润率：10px； } 按钮{ 最大宽度：570px； 左边距：182px； 高度：40px； 字体大小：30px； } .wp标题文本{ 显示：块； 位置：绝对位置； 宽度：100%； 颜色：白色； 左：0； 顶部：-30px； 底部：1px； 填充物：5px； 字体大小：粗体； z指数：2； 字体大小：40px； }

尝试使用最大宽度：100%， 图像行有两个图像，所以图像可能需要最大宽度：（a）{ 位置：相对位置； } #img行：之后{ 内容：“； 位置：绝对位置； 显示：块； 左：0； 排名：0； 最大宽度：100%； 身高：100%； z指数：1； } .按钮{ 显示：块； 背景色：#bbb； 利润率：10px； } 按钮{ 最大宽度：570px； 左边距：182px； 高度：40px； 字体大小：30px； } .wp标题文本{ 显示：块； 位置：绝对位置； 宽度：100%； 颜色：白色； 左：0； 顶部：-30px； 底部：1px； 填充物：5px； 字体大小：粗体； z指数：2； 字体大小：40px； }

您没有使用bootstrap？使用bootstrap使其响应。我不能在此处使用bootstrap。通常我使用bootstrap，但此处需要重新编写整个站点。这是旧站点。这不是我的电话，抱歉您没有使用bootstrap？使用bootstrap使其响应。我不能在此处使用bootstrap。通常我使用bootstrap，但此处需要重新编写-写整个网站..是旧网站。这不是我的电话抱歉，只是一个关于按钮的问题..为什么按钮不能缩放？这在每行的第二个图像上滚动。因为宽度是固定的…你需要更改媒体屏幕的宽度和边距…请参阅我的edit@Chiller你能帮我在每秒钟的图片和乳头上画一个水平卷轴吗les..标题在哪里？只是一个关于按钮的问题..为什么按钮不能缩放？这会在每行的第二个图像上滚动。因为宽度是固定的…您需要更改媒体屏幕的宽度和边距…请参阅我的edit@Chiller你能帮我在每秒钟的图片和标题上做一个水平滚动吗？标题在哪里？谢谢，但是我想让它们一个接一个。就像另一个答案一样。@VLS你不需要那么多代码就可以做到这一点。我已经更新了我的代码，这样你就可以将图像一个接一个地显示出来。你可以看一看。是的，但是图像上方的标题不是visible@VLS你只需要稍微修改一下你的代码就可以了。我已经更新了代码，你可以看一下。比ks非常好。除了桌面版上的按钮外，看起来很棒。现在宽度小了一点。我尝试将按钮添加到媒体屏幕上，并保留了以前的值，但没有成功。谢谢，但我希望它们一个接一个。就像另一个答案一样。@VLS您不需要那么多代码来完成它。我已经更新了我的代码，以便您可以将图像放在一个下面另一个。你可以看一看。是的，但是图片上面的标题不是visible@VLS您只需稍微修改一下代码即可轻松完成。我已更新了代码，您可以查看一下。非常感谢。除了桌面版上的按钮外，其他看起来都很不错。现在宽度稍小。我已尝试将按钮添加到媒体屏幕上，并保留了以前的按钮价值观，但不起作用