CSS：浮动div内浮动IMG

我遇到了一个问题，并没有找到解决方案。我很困惑，因为我认为这是一个非常简单的要求。CSS：浮动div内浮动IMG

有以下元件：

周围DIV＃包装
DIV＃A，浮左和固定宽度
DIV＃B，浮动左（#A的右侧）和动态宽度
div＃B内部有大量图像，向左浮动并固定宽度（和高度）。

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

我的另一种尝试是给#B一个float：right和一个margin-left（它大于#A的宽度），但那也不起作用。

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

形象化什么我说什么，我做了如下图： http://abload.de/img/rezeptbilder1k8lsr.png

提前非常感谢！

来源

2013-08-19 Sandro

如何指定格B的宽度是多少？可能你正在寻找这样的东西：http://jsfiddle.net/L3kdJ/？ –

谢谢，伊利亚！这几乎就是我正在寻找的东西！如果没有足够的空间将它们并排排列，有没有办法将#B下面的#B对齐？ – Sandro

你可以带上Ilya的代码，并在B中添加一个最小宽度的数量，以保持B中所需数量的图像连续。 – stommepoes

这是因为......你的动态宽度为div#B ......因为有很多图像，它们彼此相邻......所以最终div＃B增长到100％宽度。 ..当它有100％的宽度，然后它到达下div＃A.因为100％+ div＃A的宽度不能放在一起100％宽屏幕..你明白吗？

1解决方案::您可以使用width:calc(100% - div#a's width)。它会给DIV＃BA宽度等于除了股利＃一个

剩余的可用空间，或者您可以使用您的DIV·B overflow:hidden。 ..起初，这个div最终会增长到只剩下一排图像的剩余空间的宽度，一旦它有100％的宽度，它会创建另一排图像..但是对于这个你的包装必须固定与**overflow:auto;**也.. overflow:auto;在包装将引入滚动条时与div A和B相结合大于100％

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

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

来源

2013-08-19 17:12:29

应该指出，使用calc（）会带来某些兼容性问题。检查caniuse.com以获取浏览器支持等。 – Michael

对，我忘了提及它..我现在正在编辑 –

溢出：隐藏工作正常！（如[jsfiddle]（http://jsfiddle.net/L3kdJ/）） - 非常感谢！ – Sandro

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

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

你的浮动应该总是等于100 ％（少于100％的作品，但你有一些额外的空间等）。

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

那么...为什么你的破产？我怀疑这是因为你在忙于混合动态宽度元素和静态宽度元素。浮动从来没有设计过这样的事情。有很多种方法可以实现它，但哪种方式取决于你的代码，而我没有。

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

来源

2013-08-19 17:08:21 Michael

我通过另一个答案找到了解决方案。无论如何感谢您的努力和您提供的额外知识！ – Sandro

CSS：浮动div内浮动IMG

回答

相关问题