在同一空间添加和调整DIV的大小

我想创建一个可添加多个子DIV的栏（如下所示：http://i.imgur.com/vTM7P9v.jpg）。我正在使用jQuery，jQuery UI和Bootstrap。再加上一些插件。股利（或跨度）系统可以是这个样子：在同一空间添加和调整DIV的大小

<div class="parent"> 
    <div class="child" id="1"></div> 
    <div class="child" id="2"></div> 
    <div class="child" id="3"></div> 
</div>

而“添加格”看起来是这样的：

$('parent').append('<div class="child" id="4"></div>');

而且我不知道如何休息的jQuery/javascript可以看。我遇到的最大的问题之一是，这里的其他威胁并没有解决的问题是我也想在移动设备上使用它。也许使用Hammer.js

我一直在寻找这个相当长的一段时间，但如果这已经发布，对不起

更新：如果我不说清楚的话，你必须拖动divs。就像你可以用这个插件http://dev.iceburg.net/jquery/jqDnR/一样，但是总宽度应该保持不变（DIV的，没有被调整大小必须变小）

例如：你在600px上有一个条。有3个孩子DIV，其中每个200px。然后你调整其中的一个，所以它是300px。然后其他的是每个150px

来源

2013-02-21 LukasFT

你是说你想要一个酒吧，当你添加一个新的子div，所有其他的div会自动调整大小，并均匀分布？新的div如何添加？基于事件？ – 2013-02-21 21:45:58

是的。当一个函数被调用时。 – LukasFT 2013-02-21 23:26:09

这样的事情？

HTML：

<input type="button" id="addChild" value="Add Child"/> 
<div id="parent" class="parentClass"> 

</div>

的jQuery：

var idGen = 0; 
$("#addChild").on("click",function(){ 
    $("#parent").append("<div id='" + idGen++ + "' class='childClass'>Child Div</div>"); 
});

CSS：

.childClass 
{ 
    background-color:#b0c4de; 
    float:left; 
    border:1px solid; 
    padding:4px; 
} 
.parentClass 
{ 
    background-color:green; 
    width:500px; 
}

的jsfiddle：http://jsfiddle.net/Rrdyw/

我没有测试过，但我相信这会工作在移动a胀。

来源

2013-02-21 21:49:22

我已作出澄清。总宽度保持不变，但chld DIV的大小可以调整。我觉得很难形容。 – LukasFT 2013-02-21 23:19:56

[live]（http://api.jquery.com）已被弃用一段时间。它不像jQuery 1.9那样存在。 *请*停止使用它。更重要的是，请停止向其他人推荐它... – nbrooks 2013-02-21 23:27:59

我的不好，将其更改为开启。 – 2013-02-22 02:31:34

在同一空间添加和调整DIV的大小

回答

相关问题