Question

在CSS之下进行设置时，我将cellContentResult从容器div中取出。因此，可以说我的整个div是String languageToLoad = "ta_IN"; Locale locale = new Locale(languageToLoad); Locale.setDefault(locale); Configuration config = new Configuration(); config.locale = locale; getBaseContext().getResources().updateConfiguration(config,context.getResources().getDisplayMetrics()); recreate();，因此整个行应具有此大小。但是不幸的是，即使其余div的数据都假设为820px，cellContentResult的像素也为820px，所以整个站点都有200px。

1020px

.list {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.row {
  transition: all .2s ease-out;
  overflow: hidden;
  display: flex;
  height: 3.8em;
  width: 100%;
}

.defaultCellContent {
  display: inline-block;
  padding: 0 5px 0 5px;
  vertical-align: middle;
}

.cellContentDate {
  width: 8.5em;
}

.cellContentName {
  text-align: center;
  width: 5em;
}

.cellContentResult {
  width: 100%;
}

Answer 1

由于您已经在行上使用flex，因此可以在flex: 1上使用.cellContentResult，因为它是唯一的非固定宽度单元格。这将使其增长或缩小以占据剩余的可用空间。

.list{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.row {
    transition: all .2s ease-out;
    overflow: hidden;
    display: flex;
    height: 3.8em;
    width: 100%;
}

.defaultCellContent {
    display: inline-block;
    padding: 0 5px 0 5px;
    vertical-align: middle;
    border: 1px solid red;
}

.cellContentDate {
    width: 8.5em;
}

.cellContentName {
    text-align: center;
    width: 5em;
}

.cellContentResult {
    flex: 1;
}

<div class="list">
    <div class="row">
        <div class="cellContentIcon defaultCellContent"></div> 
        <div class="cellContentDate defaultCellContent">
            <div>2019-01-28 06:45:33</div> 
            <div>2019-01-28 06:45:43</div> 
        </div> 
        <div class="cellContentName defaultCellContent"> 
            <div class="name">task1</div> 
        </div> 
        <div class="cellContentResult defaultCellContent"> 
            <div class="result">Finished</div> 
            <div class="message">Message TESTTESTEST</div> 
        </div>
    </div>
</div>

Answer 2

当列表显示为“ table”时，我将“ .row”显示为“ table-row”，并将“ .defaultCellContent”显示为“ table-cell”。像这样：

<style>
.list {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.row {
    transition: all .2s ease-out;
    overflow: hidden;
    display: table-row;
    height: 3.8em;
    width: 100%;
}

.defaultCellContent {
    display: table-cell;
    padding: 0 5px;
    vertical-align: middle;
    border: 1px solid silver;
}

.defaultCellContent div {
    padding: 2px 0;
}

.cellContentDate {
    width: 8.5em;
}

.cellContentName {
    text-align: center;
    width: 5em;
}

.cellContentResult {
    width: 100%;
}
</style>

Answer 3

在@FrankFajardo的提示下，我可以通过以下方式实现它：

.cellContentResult {
  width: calc(100% - 18em);
}

Answer 4

“您必须将行类的高度设置为自动；然后您将获得所需的确切值。”

.row {
transition: all .2s ease-out;
overflow: hidden;
display: flex;
height: auto;
width: 100%;

}

具有100％的内部div从外部div溢出

4 个答案: