Как я могу позволить заполнить 100% ширину, если другие элементы не находятся рядом с ней?

У меня такая простая разметка (меню вкладки):

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

Это тот случай, когда все элементы имеют равную ширину 33%, чтобы заполнить 100% контейнера.

Можно ли применить общее правило CSS для всех контейнеров, которые автоматически обнаруживают, если, например, есть только один другой контейнер или нет? А затем регулирует ширину вкладок? ( "Strech-To-Fit" )

Возможно, что-то с min-width или max-width?

Ответ 1

В зависимости от каких браузеров вам необходимо поддерживать, вы можете использовать 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>

Ответ 2

Вы имеете в виду как 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>

Ответ 3

Вы можете использовать display:table и display:table-cell см. ниже код

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