Question

我想要做的是有一个响应的div，其中2个图片居中，每个div中有一个。

我想要的是下拉，当屏幕很小而且不大时，可以并排显示它们。

当屏幕较小时，如下图所示，它会将图像推入彼此。

<style>
.container{width:100%}
.inner_container{float:left;width:50%;}
.img_container{width:250px;margin:0 auto:padding-bottom:5px;}
</style>

<div class="container">
    <div class="inner_container">
        <div class="img_container">
            <a href="http://www.google.co.uk"><img src="left_img.png" width="250" height="70" alt="" border="0"></a>
        </div>
    </div>
    <div class="inner_container">
        <div class="img_container">
            <a href="http://www.google.com"><img src="right_img.png" width="250" height="70" alt="" border="0"></a>
        </div>
    </div>
</div>

Answer 1

您正在使用错误的样式来执行您尝试执行的操作。主要是，您已将250px的固定宽度设置为img_container div，这就是为什么图像不会缩小的原因。这是实现你想要的正确方法：

＆＃13;

.container {
  width: 100%
}
.inner_container {
  width: 49%;
  display: inline-block;
}
.img_container {
  width: 100%;
}
.img_container a img {
  width: 100%;
}

＆＃13;

<div class="container">
  <div class="inner_container">
    <div class="img_container">
      <a href="http://www.google.co.uk">
        <img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
      </a>
    </div>
  </div>
  <div class="inner_container">
    <div class="img_container">
      <a href="http://www.google.com">
        <img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
      </a>
    </div>
  </div>
</div>

＆＃13;

使用上面的代码，图像会继续按比例缩小并保持在同一条直线上，直到窗口大小减小到非常小。如果您希望它们在特定宽度后显示在两个单独的行上，则需要使用media-queries，如下所示：

＆＃13;

.container{width:100%}
.inner_container { width: 49%; display: inline-block; }
.img_container { width: 100%; }
.img_container a img { width: 100%; }

@media (max-width: 650px) {
.inner_container { width: 100%; display: block; }
}

＆＃13;

<div class="container">
    <div class="inner_container">
        <div class="img_container">
            <a href="http://www.google.co.uk"><img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0"></a>
        </div>
    </div>
    <div class="inner_container">
        <div class="img_container">
            <a href="http://www.google.com"><img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0"></a>
        </div>
    </div>
</div>

＆＃13;

Answer 2

在.inner_container

上设置最小宽度

.container {
    width:100%;
    overflow: hidden;
}
.inner_container {
    float:left;
    width:50%;
    min-width: 250px;
}

.img_container {
    width:250px;
    margin:0 auto;
    padding-bottom:5px;
    text-align: center;
}

http://jsfiddle.net/63pnotjc/

Answer 3

当我发布回复时，我没有注意到Fahad，显示代码段链接。

感谢您的帮助，这是我最后使用的css代码。

.container{width:100%;overflow:hidden;}
.inner_container{display:inline-block;width:49%;}
.img_container{width:250px;margin:0 auto;text-align:center;padding-bottom:5px;}

@media (max-width:501px){
.inner_container{display:block;width:100%;}
}

再次感谢你们的帮助：）

响应div与每个中的图像

3 个答案: