DIV1
...">
Clever Geek Handbook

Adjust width of dynamically added Divs

! [enter image description here] [1]! [My Image] [2]

Html

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

Jquery

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

As you can see in the image ... I have one button that adds Divs to my Div id ="data"

. I just want that by default I only have one div that is width 100%

on startup and now when I click the button it will add another one and now the widths of both divs will be automatically adjusted to 50% and the functionality goes so on

How can I achieve divs width adjustment?

enter image description here

+3


source to share


2 answers


With CSS, you can use the following properties:

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


Check Demo Script

+3


source


Try using this 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++;
    });
});
0


source






More articles:


All Articles