调整内/子元素的宽度

Question

我有一个父DIV，可能有1,2或3个子元素。如果父项只有一个元素，则子项应具有100％宽度，如果为2，则每个元素应具有50％的可用宽度;如果是3个元素，则每个子元素应具有33.3333％的宽度。

Answer 1

使用表格布局

＆＃13;

＆＃13;

.wrap{
border: 1px solid green;
min-height: 100px;
display: table;
width: 100%;
}
.wrap > div{
border: 1px solid red;
display: table-cell;
}

＆＃13;

<div class="wrap">
<div class="box">div 1</div>
<div class="box">div 2</div>
<div class="box">div 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您想避免使用表格并且 flexbox （all modern browsers支持），那么您的解决方案就是

.container {
  display: flex;
  align-items: stretch;
}
.container > * {
  display: block;
  width: 100%;
}

与

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

（也适用于更多元素）。

/* solution */
.container {
  display: flex;
  align-items: stretch;
}
.container > * {
  display: block;
  width: 100%;
  height: 100%;
}

/* for demo */
.container {
  height: 30px;
}
.container > * {
  height: 100%;
}
.container > :first-of-type {
  background-color: red;
}
.container > :nth-of-type(2) {
  background-color: green;
}
.container > :nth-of-type(3) {
  background-color: blue;
}

<h3>one item</h3>
<div class="container">
  <div></div>  
</div>

<hr>

<h3>two items</h3>
<div class="container">
  <div></div>
  <div></div>
</div>

<hr>

<h3>three items</h3>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>