我知道这个问题已被多次询问,但我无法让它工作。
我有1个屏幕容器,其中我想要彼此相邻的2个div(1个内容,1个菜单)。
1 div位于relative
,
left:-830px.
所以我可以使用overflow:hidden
和jQuery创建一个幻灯片。
这是一个JSFiddle:http://jsfiddle.net/XWsS8/4/
有谁知道为什么这不起作用?
我已经看到更多使用inline-block
的例子导致两个div彼此相邻,为什么它在我的例子中不起作用?
提前谢谢:)
附:我不想使用float
答案 0 :(得分:3)
在这种情况下与inline-block
无关,而是#menu
为position: relative
而不是position: absolute
。 See fiddle with change
position: relative
仍会导致元素占据布局中的相同空间,就像 static (here's a good explanation)一样,它只是将元素的显示渲染移动了调整后的数量(在你的情况下为-830px
)相对于它自己(如果是静态的话,那就是它)。
所以你的情况中的第二个元素被第一个元素仍然占据布局空间的左边的“void”所取代,但是已经移到了它之外进行渲染。
另一个解决方案是将relative
保持在#menu
上,并在margin-left: -830px
div上设置#content
以“拉”它如this fiddle.
#menu
布局占用了空格
当菜单设置动画时,所提供的两种解决方案都会“覆盖”#content
假设#menu
被z-index: 1
see 1st solution fiddle和2nd solution(与菜单在-430px
),而如果您希望第二个解决方案提供“推动”动画菜单下方的#content
,那么您还必须将margin-left
更改回{菜单动画时{1}},例如this fiddle shows。