从容器的右到左动态打开盒子答案

【问题标题】：dynamically open boxes from right to left of container从容器的右到左动态打开盒子
【发布时间】：2011-01-28 06:02:44
【问题描述】：

我有一个容器 div，我想在其中使用 jquery 动态创建其他框（div）。每个新盒子都应该放在其他打开的盒子的左侧。一切正常，除了盒子打开到其他打开的盒子的右侧。到目前为止，我是这样做的：

#container{

    overflow-y:hidden;
    white-space:nowrap;
    border:none;
    position:relative;
    z-index:998;
    overflow:hidden;
    float:left;
    display:table-row;
    vertical-align:bottom;
}
.box{

    z-index:997;
    vertical-align:bottom;
    width: 225px;
    position:static;
    border:1px solid #666666;
    /*next lines are added to force boxes go to bottom when minimized-cross browser solytion*/
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
}

有什么建议吗？

【问题讨论】：

标签： jquery css css-float html

【解决方案1】：

而不是附加它们（我假设你是）使用prepend 在开头添加新元素..

var newEl = $('<div>',{class:'box', text:'whatever..'});
$('#container').prepend( newEl );

http://www.jsfiddle.net/gaby/acnNe/ 上的演示

【讨论】：

感谢您的回答！我被困在试图通过 css 来做这件事，虽然这很容易......

【解决方案2】：

使用.prepend() 可能是最简单的：

$('#container').prepend( '<div class=".box">Some content</div>' );

这会将新盒子作为容器的第一个孩子插入 - 在容器中的任何其他盒子之前。

【讨论】：

感谢您的回答 :) 那行得通 - 我认为我可以通过 css 做到这一点，甚至没有考虑查看我的 jQuery 代码

【解决方案3】：

如果您使用的是 jQuery，则应使用 $.insertBefore() 在系列的“开始”处插入新的 DIV。

http://api.jquery.com/insertBefore/

【讨论】：

【解决方案4】：

你有没有想过向右浮动：

#container{
float: right
}

【讨论】：

直到我在框中添加了一个“最小化”选项，它才完成了这项工作。然后，如果容器向右浮动，则最小化的框保持在容器顶部。还是谢谢你的回答！