Come posso consentire a un div di riempire il 100% della larghezza se non ci sono altri elementi accanto?

Question

devo semplice markup simili (un menu scheda):

<div class="container"> 
    <div class="tab1"></div> 
    <div class="tab2"></div> 
    <div class="tab3"></div> 
</div> 

Questo è il caso in cui tutti gli elementi hanno una larghezza uguale del 33% ad occupare il 100% del contenitore.

È possibile applicare una regola CSS generale per tutti i contenitori che rileva automaticamente se, ad esempio, ci sono solo 1 altro contenitore o nessuno? E poi regola la larghezza delle schede? ("Strech-To-Fit")

Forse qualcosa con min-width o max-width?

Answer 1

A seconda what browsers you need to support, si può essere in grado di utilizzare FlexBox:

$('.tab').click(function() { 
 
    $(this).css('display', 'none'); 
 
});

.container { 
 
    display: flex; 
 
} 
 

 
.tab { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
    flex: 1; 
 
    margin: 5px; 
 
}

<p>Click a tab to remove it</p> 
 
<div class="container"> 
 
    <div class="tab">Tab 1</div> 
 
    <div class="tab">Tab 2</div> 
 
    <div class="tab">Tab 3</div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Vuoi dire come FlexBox?

.container { 
 
    display: flex; 
 
    height: 50px; 
 
    margin-bottom: 1em; 
 
} 
 
[class*="tab"] { 
 
    flex: 1; 
 
    border: 1px solid red; 
 
}

<div class="container"> 
 
    <div class="tab1"></div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="tab1"></div> 
 
    <div class="tab2"></div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="tab1"></div> 
 
    <div class="tab2"></div> 
 
    <div class="tab3"></div> 
 
</div>

o CSS Tabelle

.container { 
 
    display: table; 
 
    height: 50px; 
 
    width: 100%; 
 
} 
 
[class*="tab"] { 
 
    display: table-cell; 
 
    border: 1px solid red; 
 
}

<div class="container"> 
 
    <div class="tab1"></div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="tab1"></div> 
 
    <div class="tab2"></div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="tab1"></div> 
 
    <div class="tab2"></div> 
 
    <div class="tab3"></div> 
 
</div>

Answer 3

È possibile utilizzare display:table e display:table-cell vedi sotto codice

HTML:

<div class="container"> 
    <div class="tab">Tab 1</div> 
    <div class="tab">Tab 2</div> 
    <div class="tab">Tab 3</div> 
</div> 

CSS:

.container { 
    display: table; 
    width:100%; 
} 

.tab { 
    border: 1px solid black; 
    padding: 5px; 
    display: table-cell; 
    margin: 5px; 
}