子元素填充空间以匹配另一个div的宽度。
子元素填充空间以匹配另一个div的宽度。
提问于 2017-05-09 17:27:25
如果我有2个div，因为里面的文本或按钮是vw单元，所以它们是可变宽度的兄弟姐妹，那么如何才能让子按钮相等地填充空间以匹配第一个兄弟级div的宽度呢？
<div id="a"><p>The quick brown fox jumps over the lazy dog</p></div>
<div id="b"><button>quick</button><button>fox jumps</button><button>dog</button></div>我尝试这样做:将每个div设置为width:max-content;，然后使用jquery将$('#a').width()-$('#b').width()的差异除以6，将每1/6的部分放在每个按钮的左填充和右填充。然而，这似乎行不通。
我更愿意维护上面的HTML结构，但我假设我可以在一个div中只保留段落和按钮，并将段落设置为100%，每个按钮设置为33.33333%宽。但还有别的办法吗？
我以为柔性盒可能会随着弹性的增长而增长，但我不应该用柔韧盒来做这样的事情，对吗？
做我想做的事情的正确和有力的方法是什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-05-09 17:46:00
您可以使用jQuery使元素的宽度匹配，然后将按钮设置为flex-grow: 1或使用速记等效。
$('#b').width($('#a').width());div {
float: left;
clear: both;
background: #eee;
margin: 0 0 1em;
}
#b {
display: flex;
}
button {
flex: 1 0 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
<p>The quick brown fox jumps over the lazy dog</p>
</div>
<div id="b"><button>quick</button><button>fox jumps</button><button>dog</button></div>
或者，如果第一行总是比第二行长，您可以将它们都封装在一个元素中，然后将其包装为float，或者将其设置为display: inline-block或position: absolute，这样就不会有100%的宽度，然后将#b设置为flex父元素，并将button设置为flex-grow: 1或使用速记。
div {
background: #eee;
margin: 0 0 1em;
}
section {
display: inline-block;
}
#b {
display: flex;
}
button {
flex: 1 0 0;
}<section>
<div id="a">
<p>The quick brown fox jumps over the lazy dog</p>
</div>
<div id="b"><button>quick</button><button>fox jumps</button><button>dog</button></div>
</section>
Stack Overflow用户
发布于 2017-05-09 17:35:42
我能想到的最好的办法就是把它都用浮子包起来。
button {
width: 33.33%;
}
.test {
float: left;
}<div class="test">
<div id="a"><p>The quick brown fox jumps over the lazy dog</p></div>
<div id="b"><button>quick</button><button>fox jumps</button><button>dog</button></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43876263
复制相关文章
相似问题
腾讯云开发者
