javascript - 如果其他元素不显示，则填充剩余空间

Question

我有一个 div，里面有其他 3 个 div。

<div id="buttons">
   <div id="button1"></div>
   <div id="button2"></div>
   <div id="button3"></div> 
</div>

主 div(按钮)的宽度为 100%。如果我的 3 个按钮可见，则每个按钮的宽度将为 33%，如果有 2 个可见，则为 50%，如果只有一个，则 100% 与父按钮相同...

我知道如何用 javascript 修改这个值...但它只能用 javascript 修改显示和 css 修改宽度

对不起我的英语

Answer 1

您可以使用 table 和 table-cell Prop ，或通过 flexbox 实现该布局(或者可能是其他一些方法，但这些方法会在 atm 中出现)。

这两种方法各有利弊，但根据您要进行的布局，这些方法应该对您有所帮助。

根据 http://caniuse.com/ , flexbox 不适用于旧版浏览器，主要是 IE9 和以下浏览器，查看:http://caniuse.com/#search=flex

至于table 技巧，它对旧浏览器有更好的支持，http://caniuse.com/#search=table ，但它有自己的小怪癖，具体取决于您希望使用它完成的任务。

选项 1 - 表格技巧:

• 将容器设置为display: table & width: yourwidth;
• 将容器的子项设置为display: table-cell，此规则将确保它们均匀拉伸(stretch)到它们的父级
• 完成。

查看 demo here 或下面的片段:

/*option 1*/

.buttons {
  display: table;
  width: 100%;
}
.buttons > div {
  display: table-cell;
}
/*styling purposes*/

.buttons{
  margin: 10px 0;
  text-align: center;
}
#button1{
  background: red;
}
#button2{
  background: green;
}
#button3{
  background: cyan;
}

<h1>Table trick</h1>
<div class="buttons">
  <div id="button1">1</div>
  <div id="button2">2</div>
  <div id="button3">3</div>
</div>

<div class="buttons">
  <div id="button1">1</div>
  <div id="button2">2</div>
</div>

<div class="buttons">
  <div id="button3">3</div>
</div>

选项 2 - Flexbox:

• 将容器设置为display: flex
• 将子项设置为 flex: 1 100% 以便它们均匀拉伸(stretch)到它们的父级

查看 demo here 或下面的片段:

.buttons-flex {
  display: flex;
}
.buttons-flex > div {
  flex: 1 100%;
}
/*styling purposes*/

.buttons-flex {
  margin: 10px 0;
  text-align: center;
}
#button4 {
  background: red;
}
#button5 {
  background: green;
}
#button6 {
  background: cyan;
}

<h1>Flexbox trick</h1>
<div class="buttons-flex">
  <div id="button4">1</div>
  <div id="button5">2</div>
  <div id="button6">3</div>
</div>

<div class="buttons-flex">
  <div id="button4">1</div>
  <div id="button5">2</div>
</div>

<div class="buttons-flex">
  <div id="button6">3</div>
</div>

希望对您有所帮助!