Question

经过大量的搜索后，我找不到问题的解决方案，所以是时候问这里了。

这就是问题所在：我有一个块渲染的div和可变数量的按钮，这些按钮在div内部呈现为内联块。我希望这些按钮能够均匀地拉伸以填充父母的空间，例如，如果我有3个按钮，它们将拉伸至33％宽度，如果2则为50％，依此类推。

可以用纯css完成吗？提前谢谢。

Answer 1

您可以使用css flexbox：

＆＃13;

 logout() {
    this.authenticationService.isLogged = false;
this.loggedIn = false,
}

＆＃13;

.btn-holder {
  margin-bottom: 15px;
  display: flex;
}

.btn-holder button {
  flex-grow: 1;
}

＆＃13;

Answer 2

您可以将父级设置为display: table，将子级设置为display: table-cell。

.container {
  display: table;
  width: 100%;
}
.container .cell {
  display: table-cell;
  border: solid 1px black;
}

2 cells
<div class="container">
  <div class="cell">1</div>
  <div class="cell">2</div>
</div>

<br>3 cells
<div class="container">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
</div>

<br>5 cells
<div class="container">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
</div>

如何拉伸多个内联块以填充父级的所有空间？

2 个答案: