重叠内容和弹性宽度问题 CSS答案

【问题标题】：Overlapping content and elastic width issues CSS重叠内容和弹性宽度问题 CSS
【发布时间】：2012-03-28 04:21:46
【问题描述】：

我在网页设计方面是个新手，不过我已经到了那里。但我仍然在弹性布局和浮动方面遇到问题。我认为这就是我对这个页面的问题所在，但我太缺乏经验而无法理解它。

我还想让正确的滚动部分适合它的父 div。现在，它正在流出它。

呃。

任何帮助都会很棒。

编辑

现在剩下的唯一问题是图标不在其父 div 中。 http://jsfiddle.net/xehMG/2/

【问题讨论】：

这有点乱。太多解不开。您似乎在不知道为什么的情况下让所有东西都飘了起来。您正在使用一个无序列表，它通常使li 浮动，但您在li 内浮动p 标签。您还使用百分比来定位/边距，这注定会失败，并且在主体标签上设置了居中的文本，这也将使所有这些东西的定位变得困难。我会将这个问题分解为更简单的问题并重新发布，以便您真正了解您所问问题背后的机制。
Sooo...也许我应该重新开始整个事情？
亲爱的看看我的回答，如果我落后了，请告诉我。
什么是重叠的问题亲爱的请告诉我我可以为你解决。
当浏览器缩小到大约 900x600 像素时，跳转菜单与搜索结果一起戳到 right_col。

【解决方案1】：

查看代码和演示的小提琴：

查看屏幕截图以获取输出：

【讨论】：

【解决方案2】：

在您以百分比形式给出height 和width 的每个元素上设置min-height。仅当分辨率很大以包含您的子元素时，百分比才会有效。

如果您想使用百分比 - 请注意其子级所需的最小宽度并为其父级设置该最小宽度。还可以使用overflow:hidden|scroll|auto 作为后备来控制子级溢出其父级。

【讨论】：

感谢您的建议，但我不确定我是否在关注。 “只有当分辨率很大以包含您的孩子元素时，百分比才会有效。”您能否对此进行扩展，或者提供指向解释此问题的文章的链接？很抱歉，我无法理解它。
试着把你的头放在一个比那个盒子小的盒子里——不太可能是不是......这就是我的意思......当你的textBox和其他元素有宽度时说100px - 你不能把它放在一个元素中，比如80px - 如果你在没有min-width（应该设置为100px）的情况下以百分比给出宽度，你的元素可以是80px。跨度>