Question

如果我有2个像这样的div是可变宽度的兄弟，因为其中的文本或按钮是以vw为单位的，我怎样才能让子按钮同等地填充空间以匹配第一个兄弟div的宽度？ / p>

<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可能会灵活增长，但我不应该像这样使用flexbox吗？我应该吗？

做我想做的事情的正确和有力的方法是什么？

Answer 1

你可以使用jQuery制作元素＆＃39;宽度匹配，然后将按钮设置为flex-grow: 1或使用速记等效。

＆＃13;

$('#b').width($('#a').width());

＆＃13;

div {
  float: left;
  clear: both;
  background: #eee;
  margin: 0 0 1em;
}

#b {
  display: flex;
}
button {
  flex: 1 0 0;
}

＆＃13;

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

＆＃13;

或者，如果第一行总是比第二行长，您可以将它们包装在元素中float或将其设置为display: inline-block或position: absolute因此，它不是100％宽度，然后将#b设为flex父级，并将button设置为flex-grow: 1或使用速记。

＆＃13;

div {
  background: #eee;
  margin: 0 0 1em;
}

section {
  display: inline-block;
}

#b {
  display: flex;
}
button {
  flex: 1 0 0;
}

＆＃13;

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

＆＃13;

Answer 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>

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

2 个答案: