调整动态添加的Div的宽度

Question

！[在此处输入图像说明] [1]！[我的图像] [2]

HTML

<div id ="data">
  <div>DIV1</div>
</div>

Jquery的

$(function(){
  $("#button").click(function(){
    $("#Data").append('<div id="mySecondDiv"></div>');
  });
});

正如你在图片上看到的......我有一个按钮，将Div添加到我的Div id ="data"。我只是希望默认情况下我只有一个div，其宽度为100%，现在当我点击按钮时它将添加另一个，现在两个div的宽度将自动调整为50％，并且功能是这样的

如何实现Divs宽度的调整？

Answer 1

使用CSS，您可以使用以下属性：

#data {
    width:100%;
    display:table;
}
#data > div {
    display:table-cell;
    width:1%;
}

选中此Demo Fiddle

Answer 2

试试这个jquery：

$(function(){
var i = 1;
    $("#button").click(function(){
        percent = ((1/i)*100) + '%';
        $("#Data").append('<div class="hello" style="width:'+ percent +'"></div>');
        $('.hello').css('width',percent);
        i++;
    });
});