在固定宽度的水平布局中左浮动内容

我正在帮助建立她的网站的朋友。当谈到网页设计时，我自己是业余爱好者的中间人，导致无数的挫折通常通过几个小时的谷歌搜索解决。但这次不行。我真的很努力地找到一个现有的答案，没有任何可用的解决方案。在固定宽度的水平布局中左浮动内容

的一点是：Here's a working example of how far I have got yet

在“菜单”每个字母代表一个作品，点击它们含有切换图片/幻灯片项目的申报单。

我希望所有的项目divs自己安排水平，没有包装到下一行。这是与我目前的星座。
我想激活的项目浮动/自我调整到左侧（尽可能多的容器div允许他们）。这只是部分工作：

当'A'被切换时，第一个项目弹出很好，并将其自身对齐到左边。当'B'随后被切换时，它也很好地与左边对齐，靠在项目'A'上。接下来切换'C'+'D'也是一样。

当您将第一个选项切换为“D”时，问题就开始了：在这里，您将在项目左侧获得比预期更多的空白空间。同时切换'A'然后'D'，你会在项目之间得到一个奇怪的空白空间 - 而不是我期望或想要的。

你们有什么帮助吗？

来源

2012-01-09 LasseLVDBC

“toggleDiv”的JavaScript在哪里？ – FakeRainBrigand 2012-01-09 21:48:51

干草！我刚刚添加了整个HTML - 包括jQuery .toggle（DivId）函数。有什么想法吗？ – LasseLVDBC 2012-01-10 08:22:52

为什么不一次只显示所有图像，并使用左侧作为浏览图像的方式？ – Wex 2012-01-10 09:13:12

尝试添加以下样式的“.child”元素：

.child{ 
    float:left; 
    margin-right:10px; 
    display: inline-block; 
    white-space: nowrap; 
}

，并且每个项被触发时得到母体的div（#parent）的宽度。所以每次添加项目时，宽度都会被添加到#parent的宽度，从而允许水平滚动。

希望这会有所帮助。

来源

2012-01-10 05:54:14

嗨Sagar，谢谢你的帮助。由于我的编码知识非常有限，我不知道现在应该走哪里。我想添加一些jQuery的行到现有的切换功能，目标是父div？ – LasseLVDBC 2012-01-10 08:45:21

首先将float：left和margin-right：10px添加到.child，看看它是否有帮助。对于保证金权利'10px'是一个测试值，您可以将其更改为您选择的值。要进行测试，请在'#parent'上添加10000px的宽度以测试滚动是否正常。需要发生的是，每次显示“.child”元素时，水平div的宽度都需要相应扩展以适应新的“.child”元素。让我知道它是否有效。 – 2012-01-10 09:33:41

这起作用。现在这些项目将自己水平对齐，而不包装到下一行。但是，当然，当项目激活时，超出屏幕大小，scroll-x会弹出10000px的宽度，而不是项目/子项+ margin的总数nr的宽度。再次感谢！ – LasseLVDBC 2012-01-10 11:00:10

在固定宽度的水平布局中左浮动内容

回答

相关问题