Question

我在使归因于display:table-cell或元素<td>本身的元素的响应宽度方面遇到问题，我有一个父元素<div class="parent">，下面写着很少的子元素

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

并编写如下几行CSS代码

.parent {
    display: table;
    width: 100%;
    border-collapse: collapse;
}
.parent .child {
    display: table-cell;
    width : 100%;
    padding: 5px;
}

问题是，第一个孩子将具有100％的父宽度，其他两个孩子将具有0％的宽度，我试图像这样设计和更改CSS代码

.parent .child {
    display: table-cell;
    width : 33%;
    padding: 5px;
}

它确实可以正常工作，但是我真正想要的是根据孩子的数量动态地确定父级的宽度，我的意思不是那样，有时是3个，有时是5个，等等。

也许我可以使用js elementParent.childElementCount来计算孩子的数量，然后使用孩子的数量将100％分配给使用JavaScript的每个孩子的宽度，但是如果我仅使用CSS怎么办？

谢谢您的修改。

Answer 1

您可以像在子div'auto'中那样应用宽度

whenever --update-crontab
tail -f /var/log/syslog | grep CRON

让我知道这是否满足您的要求

Answer 2

添加以下内容：

.parent {
    ...
  table-layout: fixed;
}
.parent .child {
    ...
  overflow-x: hidden;
  word-break: break-word;
}

此组合使“表”均匀地分布每个“单元”的宽度。演示中添加了一些JavaScript，这些JavaScript添加了额外的单元格来演示前面描述的行为。

演示

document.querySelector('button').onclick = addCell;

function addCell(e) {
  var table = document.querySelector('.parent');
  table.insertAdjacentHTML('beforeend', `
    <div class="child">XX</div>`);
}

.parent {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid grey;
  table-layout: fixed;
}

.parent .child {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
  overflow-x: hidden;
  word-break: break-word;
}

button {
  float: right
}

<div class="parent">
  <div class="child">XXXXXXXXXXXXXXXXXXX</div>
  <div class="child">XX</div>
  <div class="child">XX</div>
</div>

<button>Add Cell</button>

表子上的动态宽度

2 个答案:

演示