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

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

尝试使用以下CSS ...

<style type="text/css">
#buttons
{
    width:100%; 
    display:table;
}

#button1
{
    background:red;
    width:34%;
    display:table-cell;
}
#button2
{
    background:green;
    width:34%;
    display:table-cell;
}
#button3
{
    background:blue;
    width:34%;
    display:table-cell;
}
</style>

当隐藏按钮时，其余按钮会占用#buttons容器的剩余空间。

将此视为在表格中显示一组tds

Answer 2

您可以使用表格＆amp; table-cell props，或者通过 flexbox （或者其他一些方法，但是这些都是atm）。

这两种方法都有优点和缺点。缺点，但根据你和你的布局，这些应该可以帮助你。

根据http://caniuse.com/， flexbox 不适合旧版浏览器，主要是IE9，请注意：http://caniuse.com/#search=flex

至于表技巧，它对旧浏览器http://caniuse.com/#search=table提供了更好的支持，但它有自己的小怪癖，具体取决于你想用这个来实现的目标。 / p>

选项1 - 表格技巧：

• 将容器设置为display: table＆amp; width: yourwidth;
• 将容器的子级设置为display: table-cell，此规则将确保它们在父级中均匀
• 进行。

查看 demo here 或下面的代码段

＆＃13;

＆＃13;

/*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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

选项2 - Flexbox ：

• 将容器设置为display: flex
• 将childrent设置为flex: 1 100%，以便他们在父母身上均匀

查看 demo here 或下面的代码段

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这能帮到你！