Zmniejsz elementy div dodając nowe

Question

Postaram się wyjaśnić to najlepiej jak potrafię. Chcę zastosować tę zasadę do mojej własnej.

Tab Add Example

Jak widać Dodaję „zakładki” na pasku kart. Kiedy dodaję wystarczającą liczbę zakładek do wypełnienia całego paska kart, a ja wciąż dodam więcej, te zakładki zasadniczo zmieniają rozmiar, aby pasowały do ​​elementu div. Nie chcę, aby rozwijali element div lub używali paska przewijania, aby poruszać się między nimi. Chcę, żeby zmniejszyły się w div. Możesz zobaczyć dokładny przykład na GIF I połączonym.

Powinien również zachowywać się tak samo przy zmianie rozmiaru okna.

Window Resize Example

Czy macie jakieś pomysły jak to osiągnąć? Próbowałem z JQuery, ale było to zbyt trudne "kodowanie", nie działałoby na zmianę rozmiaru ani rozdzielczości ekranu.

HTML chcę zastosować:

<div class="l_tabs"> 
<div> 
    <ul id="myTab1" class="nav nav-tabs bordered"> 
    <li class="tab-add"></li> 
    <li class="contentTab"></li> 
    <li class="contentTab"></li> 
    <li class="contentTab"></li> 
    <li class="contentTab"></li> 
    </ul> 
</div> 
</div> 

Kiedy dodać nową kartę dodaje ten
<li class="contentTab"></li>

JSFiddle

jakieś sugestie?

Answer 1

Można to zrobić z Flexbox, wystarczy ustawić flex-basis

$(".add").click(function() { 
 
    $(".tabs").append('<li class="tab">Lorem ipsum</li>'); 
 
}) 
 

 
$('.remove').click(function() { 
 
    $('.tab').last().remove(); 
 
})

.tabs { 
 
    display: flex; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
.tab { 
 
    border: 1px solid black; 
 
    flex-basis: 200px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="tabs"> 
 
    <li class="tab">Lorem ipsum</li> 
 
</ul> 
 

 
<button class="add">Add Tab</button> 
 
<button class="remove">Remove Tab</button>

Answer 2

Można użyć schematu flexbox zrobić dokładnie to, co chcesz

ul { 
    display: -webkit-box; 
} 


ul li { 
    -webkit-box-flex: 1; 
    background: #ddd; 
    padding: 10px 15px 6px 15px; 
    white-space: nowrap; 
    overflow: hidden; 
    max-width: 180px; 
    min-width: 60px; 
    border: solid #ccc 1px; 
    border-bottom: none; 
    border-radius: 5px 5px 0 0; 
    text-overflow: ellipsis; 
} 

Answer 3

$('.tab-add').click(function() { 
 
    $('.tab-add').html('+'); 
 
    var lastCount = $('#myTab1 li:last-child').html(); 
 
    var plusOne = parseInt(lastCount) + 1; 
 
    $('#myTab1').append('<li class="contentTab">' + plusOne + '</li>'); 
 
});

* { 
 
    margin: 0; padding: 0; 
 
} 
 
.l_tabs { 
 
    width: 100%; 
 
    background-color: red; 
 
} 
 
#myTab1 { 
 
    display: flex; 
 
    list-style-type: none; 
 
} 
 
#myTab1 li { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex: 1; 
 
    line-height: 50px; 
 
    color: white; 
 
    background-color: hsla(0, 0%, 20%, 1); 
 
} 
 
#myTab1 li:nth-child(even) { 
 
    background-color: hsla(0, 0%, 40%, 1); 
 
} 
 
.tab-add:hover { 
 
    background-color: hsl(0, 55%, 55%)!important; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="l_tabs"> 
 
<div> 
 
    <ul id="myTab1" class="nav nav-tabs bordered"> 
 
    <li class="tab-add">click to add</li> 
 
    <li class="contentTab">1</li> 
 
    <li class="contentTab">2</li> 
 
    <li class="contentTab">3</li> 
 
    <li class="contentTab">4</li> 
 
    </ul> 
 
</div> 
 
</div>

skrzypce

https://jsfiddle.net/Hastig/mx2mxgg1/2/

Answer 4

Można użyć display: table i display: table-cell na to:

$("#add").click(function() { 
 
    $("<li>", { "class": "tab", "text": "Lorem ipsum" }).appendTo(".tabs"); 
 
}); 
 

 
$("#del").click(function() { 
 
    $(".tab").last().remove(); 
 
});

.tabs { 
 
    display: table; 
 
    border-collapse: collapse; 
 
    padding: 0; 
 
} 
 
.tab { 
 
    display: table-cell; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="tabs"> 
 
    <li class="tab">Lorem ipsum</li> 
 
</ul> 
 

 
<button id="add">Add Tab</button> 
 
<button id="del">Remove Tab</button>