Question

我正在尝试创建类似于包含行和单元格的表的内容，但我不想使用行和单元格，我目前正在使用DIV元素，一切都很顺利，直到我尝试调整宽度内部DIV元素填充其父DIV（可能是行）的宽度，而不必对所需的百分比进行精确计算。

＆＃13;

.container {
    width: 100%;
    display: flex;
    border: 5px solid black;
}

.container > div {
    width: inherit;
    display: inline-flex;
    border: 5px solid red;
}

.container > div > div {
    border: 5px solid green;
    height: 50px
}

＆＃13;

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

＆＃13;

Answer 1

来自MDN：

flex CSS属性是一个指定能力的速记属性一个弹性项目，以改变其尺寸，以填补可用空间。

您需要向flex: 1;提供.container > div > div以扩展内部div元素。

.container > div > div {
    border: 5px solid green;
    height: 50px
}

Demo

Answer 2

您可以使用flex属性：

.container {
  width: 100%;
  display: flex;
  border: 5px solid black;
}

.container>div {
  width: inherit;
  display: inline-flex;
  border: 5px solid red;
}

.container>div>div {
  border: 5px solid green;
  height: 50px;
  flex: 1;
}

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

Answer 3

也许这就是你需要的？（最里面的div也应该继承宽度）

.container {
    width: 100%;
    display: flex;
    border: 5px solid black;
}

.container > div {
    width: inherit;
    display: inline-flex;
    border: 5px solid red;
}

.container > div > div {
    width: inherit;
    border: 5px solid green;
    height: 50px
}

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

Answer 4

这里我对你的CSS进行了更改，但是当你尝试自动增长你的div时你需要做一个flex。看看.container > div > div样式。

.container {
    width: 100%;
    display: flex;
    border: 5px solid black;
}

.container > div {
    width: inherit;
    display: inline-flex;
    border: 5px solid red;
    
    
}

.container > div > div {
    border: 5px solid green;
    height: 50px;
    flex: 1;
}

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

Div Fill整个父DIV内的Div没有显示：表

4 个答案: