CSS：在浮动div中浮动IMG

Question

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

有以下要素：

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

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

我的替代尝试是给#B一个浮点数：右边和左边距（大于#A的宽度），但这也没有用。

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

为了想象我正在谈论的内容，我制作了以下图表： http://abload.de/img/rezeptbilder1k8lsr.png

非常感谢提前！

Answer 1

这种情况正在发生，因为你正在为你的div#B设置动态宽度......因为有很多图像并且它们彼此相邻...所以最终div＃B增长到100 ％width ...当它有100％宽度然后它到达div＃A.因为100％+ div #A的宽度不能在100％宽屏幕中组合在一起..你理解???

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

或者您可以在div＃B中使用 overflow:hidden ...现在首先这个div最终会增加剩余可用空间的宽度，并带有一行图像和一旦它有100％的宽度，它将创建另一行图像..但为此你的包装器必须与**overflow:auto;**一起固定..包装器中的overflow:auto;将在与div A组合时引入滚动条和B大于100％

编辑:: CHECK BROWSER SUPPORTS FOR CALC() HERE

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

Answer 2

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

那说......基于你的描述和你的形象，div＃A和div＃B上的花车都在破碎。最常见的原因是你的宽度加起来超过div＃wrapper宽度的100％（浮动元素的包含或父元素）

你的花车应该总是同样100％（不到100％可以工作但是你在某处有一些额外的空间等）。

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

那么......你为什么要打破？我怀疑是因为你想要混合动态宽度元素和静态宽度元素。 Float从来没有设计过像这样的东西。有多种方法可以实现它，但哪种方式取决于我没有的代码。

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