0

我遇到了一个问题，但没有找到解决方案。我很困惑，因为我认为这是一个非常简单的要求。

有以下要素：

  • 周围的 div#wrapper
  • div#A，向左浮动，固定宽度
  • div#B，向左浮动（#A 的右侧）和动态宽度
  • 在 div#B 内部有很多图像，左浮动和固定宽度（和高度）。

根据屏幕分辨率，屏幕右侧（div#A 旁边）应该有 1、2、3、n 列图像。取而代之的是，容器#B 在容器#A 下方对齐并使用整个窗口宽度。

我的替代尝试是给 #B 一个 float:right 和一个 margin-left （大于 #A 的宽度），但这也不起作用。

我想避免绝对定位，因为周围包装的高度应该随着它的内容而增加。

为了形象化我在说什么，我制作了下图： http ://abload.de/img/rezeptbilder1k8lsr​​.png

提前谢谢了！

4

2 回答 2

1

发生这种情况是因为..您的 ...ans 具有动态宽度，div#B因为有很多图像并且它们彼此相邻对齐...所以最终 div#B 增长到 100% 宽度...当它有100% 宽度然后它到达 div#A 下。因为 100% + div#A 的宽度不能在 100% 宽的屏幕中组合在一起。你明白吗？？？

第一个解决方案:: 你可以使用width:calc(100% - div#a's width).it 会给 div#ba 宽度等于除 div#a 之外的剩余可用空间

或者你可以overflow:hidden在你的 div#B 中使用...现在首先这个 div 最终会增长到使用单行图像占用剩余可用空间的宽度，一旦它具有 100% 的宽度，它将创建另一行图像..但是为此，您的包装器必须与 with**overflow:auto;**也固定在一起。overflow:auto;当与 div A 和 B 结合大于 100% 时，包装器中将引入滚动条

编辑 :: 在此处检查 CALC() 的浏览器支持

注意::如果您向我们提供您的尝试，我们的建议将更合适

于 2013-08-19T17:12:29.760 回答
0

我真的无法提供解决方案，因为您没有提供任何代码。（请这样做）

就是说...根据您的描述和图像，您在 div#A 和 div#B 上的浮动正在破坏。最常见的原因是您的宽度加起来超过 div#wrapper （浮动元素的包含或父元素）宽度的 100%

你的浮动应该总是以同样的 100% 结束（少于 100% 的工作，但是你在某处有一些额外的空间等）。

例如......如果你有 100px 宽的 #wrapper，那么你可以有两个 div 里面是 50px 和 50px 宽，或者 30px 和 70px 等，因为添加这些值 = 100px 是 100%。

所以...为什么你的坏了？我怀疑这是因为您试图将动态宽度元素与静态宽度元素混合。Float 从来没有被设计做这样的事情。有多种方法可以实现它，但哪种方法取决于我没有的代码。

其他可能的原因是因为太多的边距空间，太多的填充，甚至是你的 div 上的边框。默认情况下，元素的宽度包括它的内边距、边距和边框宽度。如果你有一个 100px 宽的 div，左右两边有 10px 的内边距和 2px 的边框（每边 2px）。然后你有一个总宽度为 124px 的 div。

于 2013-08-19T17:08:21.240 回答