Question

.fooBar {
        float: left;
        display:inline-block;
        height: 600px;
        margin-right: 0px;
}

$('.fooBar').click(function(){
    $(this).css('margin-right', '20px');        
});

我有一堆浮动和水平布局的div对象。我有一个按钮，可以将它们实时分开。你可以看到我正在使用的jQuery行。

然而，它似乎根本不起作用......关于如何动态更改div的margin-right属性的任何想法？

编辑：这是标记：

<div class="fooBar" style="width: 200px;" ><image src="../work/test1.jpg"></div>
<div class="fooBar" style="width: 210px;" ><image src="../work/test2.jpg"></div>
<div class="fooBar" style="width: 450px;" ><image src="../work/test3.jpg"></div>
<div class="fooBar" style="width: 610px;" ><image src="../work/test4.jpg"></div>

编辑＃2：删除无关的“内联块”似乎解决了这个问题。谢谢大家！

Answer 1

显示和浮动样式是互斥的（据我所知），所以你可以开始修复它。

Answer 2

我感觉这是因为连字符。我认为像marginRight这样的一些伪别名“魔术字符串”可能有用，请尝试相反。我以前见过并在使用jQuery / JavaScript访问时使用了backgroundColor，而CSS等价物应该是背景颜色。

Answer 3

Float和margin无法正常处理未分配width的元素。

给.fooBar width，它应该有用。

另外，请删除display:inline-block;

以下是一个工作示例：http://jsfiddle.net/jasongennaro/2fkx7/

注意：我使用了margin-left，因为您在示例中看不到margin-right的更改...因为该元素的右侧没有任何内容。

我无法让jQuery更新DIV对象的“margin-Right”属性。有任何想法吗？

3 个答案: