0

在一个页面上，我有两个 div，可以说 Left_Div 和 Right_Div。在右侧 div 上，我使用 CSS 的 Top 和 Left 属性定位了多个图像。Left_Div 用作左侧面板，在按钮上单击我为 Left_Div 和 Right_Div 设置动画以向右滑动，Left_Div 变为可见。就像 facebook iphone 应用程序上的左侧菜单一样。

 $("#Right_Div").animate({ marginLeft: "600px" }, 500);    
 $("#LeftDiv").animate({ width: "600px", opacity: 1 }, 500);

问题是当 Left_Div 和 Right_Div 滑动时，使用 Left 和 Right 属性定位的图像不会移动，因此它们会与 Left_Div 重叠。任何人都请帮助我如何使用 DIV 移动图像。

我不想再次休息顶部/左侧属性，因为有太多图像并且它们是动态加载的。

我希望我已经解释了我的问题:)

4

1 回答 1

1

如果您想要动态运动，您无法给出准确的位置。

通过说图像是从左侧开始的一定数量的像素，无论如何，图像将始终准确地存在。

您将不得不使用浮动逻辑，例如，您可以分配float: left或分配给float: right您想要在左侧或右侧并排排列的所有组件。

然后，当您移动一个元素时，所有其他设置为浮动在它旁边的元素都会随之移动。

演示- 使用动画逻辑的浮动示例

在演示中，您现在可以看到应用浮动时元素如何相互移动。

上面的 DEMO 有以下 HTML：

<div id="Left_Div">My left div</div>
<div id="anotherLeftdiv">My other left div</div>
<div id="anotherRightdiv">My other right div</div>
<div id="Right_Div">my right div</div>​

CSS：

#Left_Div, #anotherLeftdiv{
    float: left;
}

#Right_Div, #anotherRightdiv{
 float: right;   
}

脚本：

$("#Left_Div").animate({ width: "150px", opacity: 1 }, 500);
$("#anotherRightdiv").animate({ marginRight: "100px" }, 500);

我希望这是有道理的。如果没有您当前确切的 CSS 和 HTML，很难准确地告诉您必须更改哪些内容。

编辑我在右侧 div 中添加了 4 个图像，并使用而不是固定定位
将它们放置到 4 个角中。floatclear

只要它们没有得到任何固定位置，它们就会简单地随着 div 的动画移动。

演示- 带有浮动图像的动画

图像位于 div 容器中，float: left例如clear: right，您可以告诉图像一直向左移动，并在其右侧强制中断。因此使用 float:left 的任何其他图像都将被迫进入下面的行。

这同样适用于float:rightand clear: right，这些设置会强制图像保持在右侧并强制在其右侧中断，从而强制任何其他图像float: right进入下面的行。

查看 HTML 中的图像：

<div id="Right_Div">
    <img class="left" src="http://www.fileden.com/files/2012/6/19/3318010/Eraser.png"/>
    <img class="right" src="http://www.fileden.com/files/2012/6/19/3318010/Script.png"/>
    <img class="left" src="http://www.fileden.com/files/2012/6/19/3318010/Ok.png"/>
    <img class="right" src="http://www.fileden.com/files/2012/6/19/3318010/Decrease%20time.png"/>
</div>​

强制图像进入角落的样式：

img.left{
    float: left;
    clear: right;
}

img.right{
    float: right;
    clear: right;
}

我希望这有帮助。你现在应该有很多东西可以玩了。

如果您现在遇到任何关于您的特定实现或任何您无法解决的 CSS 的问题，那么完成这个问题并询问一个发布您遇到问题的特定代码的新问题会更容易。

于 2012-08-18T08:05:01.593 回答