在未知宽度的父级内部沿着固定宽度的元素拉伸未知宽度的元素

Question

我有一个未知宽度的父div（宽度取决于某些屏幕宽度计算）。子div的数量为4并浮动，以便它们水平对齐。第1，第2和第4是固定宽度值的良好候选者。但是，第3个元素可以伸展以适合父div中的剩余空间。

我不知道为什么父母的display:table;和孩子的display:table-cell的方法对我不起作用。三个元素的宽度是固定的，除了有关的div，我也尝试width:auto无效。

<div class="parent">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
    <div class="fourth"></div>
</div>

最小的CSS：

.parent
{
  width: 100%;
  display:table;
}
.first
{
  width: 80px;
  height: 80px;
  float: left;
  display: table-cell;
}

.second
{
 width: 80px;
  height: 80px;
  float: left;
  display: table-cell;
}

.third
{

  height: 80px;
  float: left;
  display: table-cell;
}

.fourth
{
  width: 80px;
  height: 80px;
  float: left;
  display: table-cell;
}

非常感谢您的平常帮助。

Answer 1

您可以使用 Flexbox 执行此操作，因此，如果您将flex: 1添加到一个子div，则会剩余免费width

.parent {
  display: flex;
  border: 1px solid black;
}

.child {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  width: 50px;
}

.long {
  flex: 1;
}

<div class="parent">
  <div class="child">Div 1</div>
  <div class="child">Div 2</div>
  <div class="child long">Div 3</div>
  <div class="child">Div 4</div>
</div>

或者您可以将 CSS表格与table-layout: fixed一起使用Browser support

.parent {
  display: table;
  width: 100%;
  border: 1px solid black;
  table-layout: fixed;
}

.child {
  border: 1px solid black;
  display: table-cell;
  margin: 5px;
  padding: 5px;
  width: 50px;
}

.long {
 width: 100%;
}

<div class="parent">
  <div class="child">Div 1</div>
  <div class="child">Div 2</div>
  <div class="child long">Div 3</div>
  <div class="child">Div 4</div>
</div>

Answer 2

对于IE9 +

您可以使用inline-block和calc()。

段

＆＃13;

＆＃13;

body {
 margin:0
}  
.parent {
  border:solid black;
  font-size:0; /*fix inline-block gap*/
}

.child {
  border: 1px solid red;
  margin: 5px;
  width:100px;
  display:inline-block;
  font-size:16px /*restore font -size*/
}

.calc{
  width: calc(100% - 348px)
}

＆＃13;

<div class="parent">
  <div class="child">one</div>
  <div class="child">two</div>
  <div class="child calc">three</div>
  <div class="child">four</div>
</div>

＆＃13;

＆＃13;

＆＃13;

对于IE8 +

您可以使用display:table/table-cell

段

＆＃13;

＆＃13;

body {
  margin: 0
}
.parent {
  border: solid black;
  display: table;
  table-layout: fixed;
  width: 100%;
  /*optional*/
  border-collapse:separate;
  border-spacing:5px;
  box-sizing:border-box;
}
.child {
  border: 1px solid red;
  width: 100px;
  display:table-cell;
}
.big {
  width:100%
}

＆＃13;

<div class="parent">
  <div class="child">one</div>
  <div class="child">two</div>
  <div class="child big">three</div>
  <div class="child">four</div>
</div>

＆＃13;

＆＃13;

＆＃13;