Adjust Ширина динамически добавляемые Divs

Question

! [Введите описание изображения здесь] [1]! [My Image] [2]

HTML

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

Jquery

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

Как вы можете Смотрите на изображении ... У меня есть одна кнопка, которая добавляет Divs к моему Div id ="data". Я просто хочу, чтобы по умолчанию у меня есть только один div, ширина которого равна 100% при запуске, и теперь, когда я нажимаю кнопку, он добавит еще один, и теперь ширина обоих div будет автоматически настроена на 50%, и функциональность будет так на

Как достичь регулировки ширины диванов?

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++; 
    }); 
});