Question

当我缩小浏览器时，我有一个向下跳出div的图像。我已经尝试了各种各样的事情来阻止这种情况的发生，并且无法使用正确的密钥（我没有很自然地采用响应式网页编码。我可能在这里达到了我的极限....）。

欢迎任何建议。

缩小浏览器时，<div id="fadeshow"></div>的内容会向下跳。

Answer 1

乍一看，我认为它与#fadeshow div中的min-width设置有关。如果您注意到最小宽度设置为580px，这大约是缩小浏览器大小时图像跳转的位置。最小宽度设置是否有特殊原因并且可以将其删除？

#fadeshow {
    max-width: 800px;
    margin: 0 auto;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    min-width: 580px;
}

Answer 2

问题是包含图像的'外部'div没有CSS最小宽度。

因此，当屏幕尺寸减小，使得屏幕宽度小于图像宽度（580px）时，外部div会不断缩小，图像会弹出。

如果将min-width: 590px;添加到.outer样式，您应该会发现问题已修复。

我在开发人员工具中测试过它很好。

Answer 3

问题在于这一行

<div class="emptyDiv verticalCenter"></div>

我不知道你为什么要包括这个，但肯定是你的图像在缩小浏览器时向下跳跃的原因。

并将图像放在中心，你可以改变

.outer .inner {
   padding: 10px;
}

到

.outer .inner {
  padding: 45px; //or whatever suits your design
}

在调整浏览器大小时，图像跳出div

3 个答案: