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

I have a div with other 3 divs inside.

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

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

The width of the main div (buttons) is 100%. If my 3 buttons are visible the width of each button will be 33%, if 2 are visible will be 50% and if only one so 100% the same of the parent...

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

I know how to modify this values with javascript... but its possible modify only with javascript the display and css modify the width

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

SORRY BY MY ENGLISH

抱抱我的英语

2 个解决方案

#1

You can achieve that layout using table & table-cell props, OR via flexbox (or maybe some other methods, but these ones come in mind atm).

您可以使用表格和表格单元格道具来实现该布局,或者通过flexbox(或者其他一些方法,但这些可以考虑atm)来实现。

Both these methods have pros & cons, but depending on what you're going with you're layout, these should help you out.

这两种方法都有利弊,但根据你的布局,这些方法可以帮助你。

According to http://caniuse.com/, flexbox doesnt go to well with older browsers, mainly IE9 and bellow that, check it out: http://caniuse.com/#search=flex

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

As for the table trick, it has a much better support with older browsers, http://caniuse.com/#search=table, but it has its own little quirks depending on what you want to accomplish using this.

至于桌面技巧,它对旧版浏览器有更好的支持,http://caniuse.com/#search=table,但它有自己的小怪癖,这取决于你想用它做什么。

Option 1 - Table Trick:

选项1 - 表格技巧:

• set the container to display: table & width: yourwidth;

设置容器显示:table&width:yourwidth;

• set the children of the container to display: table-cell, this rule will make sure theyll stretch evenly across their parent

设置容器的子项显示:table-cell,此规则将确保它们在父项之间均匀伸展

• done.

View demo here or snippet bellow:

在这里查看演示或下面的代码段:

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

Option 2 - Flexbox:

选项2 - Flexbox:

• set the container to display: flex

设置容器显示:flex

• set the childrent to flex: 1 100% so that theyll stretch evenly across their parent

将childrent设置为flex:1 100%,以便它们在父项上均匀伸展

View demo here or snippet bellow:

在这里查看演示或下面的代码段:

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

Hope this help you out!

希望这能帮到你!

#2

Try using the following CSS...

尝试使用以下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>

As the buttons are hidden, the remaining buttons take up the remaining space of the #buttons container.

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

Think of this as displaying a set of tds in a table

可以把它想象成在表格中显示一组tds