【问题标题】：How can I prevent a responsive div from going into another div using CSS?如何使用 CSS 防止响应式 div 进入另一个 div？
【发布时间】：2014-07-01 03:10:10
【问题描述】：

我在顶部和底部有一些固定像素 div，中间有一个响应式 div。屏幕调小时如何防止它进入顶部div？

这是一个说明问题的工作示例。我希望能够使浏览器变小，而不是让黑匣子变成红色。同时保持响应能力。

<div style="position:relative; height:100px; width:100%; background:red;"/>

http://jsfiddle.net/RHZLr

【问题讨论】：

您确实必须了解响应式的真正含义，并修复您将所有内容都编码到 atm 的方式。
我需要宽度为 100% 而不是固定的，因为我有需要保持响应的引导程序。

标签： html css alignment center

【解决方案1】：

在这种情况下，我会忘记绝对定位。使所有的盒子相对定位，并使用边距随意定位黑盒子。这样，响应就可以按需要工作。

Working Fiddle

#blackBox{
    margin: 0 auto;
    height: 200px;
    width: 400px;
    background: black;
}

【讨论】：

【解决方案2】：

尝试使用固定宽度，而不是使用 width:100%。固定宽度不会移动，因此您不必担心它们会侵入其他 div。

还有！

一旦屏幕达到特定尺寸，您可能应该使用 CSS 媒体查询为 div 提供固定（非移动）位置。

例如

#div1{
  position:relative; 
  left:25%; 
  width:50%;
}
@media screen and (max-width:600px){
   #div1{
      width:500px;
      height:500px;
   }
}

Working Pen!

（codepen.io 示例）

【讨论】：