html - 如果旁边没有其他元素，如何让div填充100％的宽度？

我有这样的简单标记(选项卡菜单):

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

当所有元素的宽度相等为33％以填充容器的100％时就是这种情况。

是否有可能对所有容器应用通用CSS规则，这些规则会自动检测例如是否只有一个其他容器或没有一个？然后调整标签的宽度？ (“适合健身”)

也许带有min-width或max-width的东西？

最佳答案

根据what browsers you need to support，您可能可以使用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>