如果没有其他元素,如何让div填充100%宽度? [英] How can I let a div fill 100% width if no other elements are beside it?
本文介绍了如果没有其他元素,如何让div填充100%宽度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这样的简单标记(标签菜单):
I have simple markup like this (a tab menu):
<div class="container">
<div class="tab1"></div>
<div class="tab2"></div>
<div class="tab3"></div>
</div>
这是所有元素具有相等宽度33%以填充100%容器的情况。
That is the case when all elements have an equal width of 33% to fill 100% of the container.
是否可以对所有容器应用一般的CSS规则,自动检测例如是否只有一个其他容器或没有?然后调整选项卡的宽度? (Strech-To-Fit)
Is it possible to apply a general CSS rule for all containers that automatically detects if, for example, there are only 1 other container or none? And then adjusts the width of the tabs? ("Strech-To-Fit")
可能是 min-width
或 max-width
?
推荐答案
根据您需要什么浏览器要支持,您可以使用flexbox:
Depending on what browsers you need to support, you may be able to use 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>
这篇关于如果没有其他元素,如何让div填充100%宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文