Jak mogę wypełnić element div fill 100% width, jeśli nie ma obok niego żadnych innych elementów?

Question

mam prostego oznakowania takiego menu karta (A):

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

Tak jest w przypadku, gdy wszystkie elementy mają taką samą szerokość 33% do 100% wypełnienia pojemnika.

Czy można zastosować ogólną regułę CSS dla wszystkich kontenerów, które automatycznie wykrywają, czy na przykład jest tylko 1 inny kontener, czy nie? A następnie dostosowuje szerokość zakładek? ("Strech-To-Fit")

Być może coś z min-width lub max-width?

Answer 1

zależności what browsers you need to support, może być w stanie używać schematu 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

Chodzi ci schematu 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>

lub CSS Stoły

.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

Można użyć display:table i display:table-cell patrz poniżej kod

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