子元素填充空间以匹配另一个 div 的宽度答案

【问题标题】：Children elements fill space to match width of another div子元素填充空间以匹配另一个 div 的宽度
【发布时间】：2017-05-10 01:46:00
【问题描述】：

如果我有 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% 宽度。但是还有其他方法吗？

我认为 flexbox 可以使用 flex-grow，但我不应该将 flexbox 用于这样的事情，不是吗？

什么是做我想做的事情的正确和稳健的方法？

【问题讨论】：

这就是你想要的吗？ codepen.io/anon/pen/eWVYYX
@MichaelCoker 是的，就是这样。但是，虽然这解决了我的问题，但是否有另一种（更受支持或更有效）方法来实现这种风格？无论哪种方式，请把它作为答案，以防我需要检查它。

标签： javascript jquery html css

【解决方案1】：

您可以使用 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 父级并将 buttons 设置为 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>

【讨论】：

【解决方案2】：

我能想到的最好的办法就是把它全部包装在一个浮动的 div 中。

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>

【讨论】：