重新评估时，我的div正在下降

Question

我从响应式设计开始，我有下一个问题：

当我重新调整我的div时，在两列的设计中，右边的一行正在下降。

在重新评估之前的Ex：

并且在重新确认之后：

我不知道为什么要降低设计是％。也许有人可以帮助我，这里是我正在使用的css代码。

* { margin: 0px; padding: 0px; }

h1 {font: bold 20px verdana, sans-serif; }

h2 {font: bold 14px verdana, sans-serif; }

header, section, footer, aside, nav, article, figure, figcaption, hgroup { display: block; }

body { width: 100%; text-align: center; }

#envoltura { margin: 15px auto; text-align: left; padding: 0px 2% 0px 2%}

#cabecera { background: #FFFBB9; border: 1px solid #999999; padding: 20px; text-align: center; }

#menu { background: #CCCCCC; padding: 5px 15px; text-align: center; }

#menu li { display: inline-block; list-style: none; padding: 5px; font: bold 14px verdana, sans-serif; }

#seccion { float: left; width: 65%; margin: 20px 0px 0px 0px; border: 2px solid #999999; padding: 2%; text-align: center; }

#lateral { float: left; width: 26.4%; margin: 20px 0px 0px 0px; padding: 2%; background: #CCCCCC; border: 2px solid #999999; text-align: center; }

#pie { clear: both; text-align: center; padding: 20px; border-top: 2px solid #999999; }

Answer 1

这是因为你的div等于100％以上的父母试试这个并按你认为适当的方式进行编辑

如果你发布你的html我可以解释它更加

将您的正文设置为绝对值示例body{width:1200px}，然后将您的第一个媒体查询设置为@media screen and (max-width: 1199px){body{width: 100%}}这样您知道超过1199像素的页面将会中断

Answer 2

因为您还没有足够的空间容纳该窗口大小的两列！

►为每个媒体查询声明不同的布局： （以下基于最小和最大屏幕分辨率范围的方法）

@media only screen and (min-width: 480px) and (max-width: 979px) {
  /* Your styles for between these two resolutions here */
}

或！ 取决于您想要做什么，完成最终目标，您甚至可能不需要使用媒体查询

►以与浏览器或包装器div相关的百分比定义每列的宽度。

#wrapper {
  position: relative; // the below is relative to this
  margin: 0 auto; // center
  max-width: 1024px; // max size of container
  width: 100%; // 100% between min and max ;)
  min-width: 960px; // lowest toggle point
}
.left { 
  width: 80%; // 80% of above
  float:left;
  min-width: 500px; // add a min-width to declare stopping point
}
.right { 
  width: 20%; // 20% of above
  float:right;
  min-width: 100px; // add a min-width to declare stopping point
}