div是彼此相邻的,内联块仍会导致没有浮动的换行符

时间:2013-11-22 18:33:13

标签: html css

我知道这个问题已被多次询问,但我无法让它工作。 我有1个屏幕容器,其中我想要彼此相邻的2个div(1个内容,1个菜单)。 1 div位于relative

left:-830px. 

所以我可以使用overflow:hidden和jQuery创建一个幻灯片。

这是一个JSFiddle:http://jsfiddle.net/XWsS8/4/

有谁知道为什么这不起作用?
我已经看到更多使用inline-block的例子导致两个div彼此相邻,为什么它在我的例子中不起作用?

提前谢谢:)
附:我不想使用float

1 个答案:

答案 0 :(得分:3)

在这种情况下与inline-block无关,而是#menuposition: relative而不是position: absoluteSee fiddle with change

position: relative仍会导致元素占据布局中的相同空间,就像 static here's a good explanation)一样,它只是将元素的显示渲染移动了调整后的数量(在你的情况下为-830px相对于它自己(如果是静态的话,那就是它)。

所以你的情况中的第二个元素被第一个元素仍然占据布局空间的左边的“void”所取代,但是已经移到了它之外进行渲染。

另一个解决方案是将relative保持在#menu上,并在margin-left: -830px div上设置#content以“拉”它如this fiddle.

中所示,#menu布局占用了空格

当菜单设置动画时,所提供的两种解决方案都会“覆盖”#content假设#menuz-index: 1 see 1st solution fiddle2nd solution(与菜单在-430px),而如果您希望第二个解决方案提供“推动”动画菜单下方的#content,那么您还必须将margin-left更改回{菜单动画时{1}},例如this fiddle shows