Wie kann ich ein div 100% Breite füllen lassen, wenn keine anderen Elemente daneben sind?

Question

I haben einfache Auszeichnungs wie folgt aus (a Tabmenü):

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

das der Fall ist, wenn alle Elemente die gleiche Breite von 33% haben 100% des Behälters zu füllen.

Ist es möglich, eine allgemeine CSS-Regel für alle Container anzuwenden, die automatisch erkennt, ob es z. B. nur einen anderen Container oder keinen gibt? Und passt dann die Breite der Tabs an? ("Strech-To-Fit")

Vielleicht etwas mit min-width oder max-width?

Answer 1

Je nach what browsers you need to support, können Sie in der Lage sein Flexbox zu verwenden:

$('.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

Sie mögen Flexbox bedeuten?

.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>

oder CSS-Tabellen

.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

Sie können display:table verwenden und display:table-cell siehe unten Code

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