我在使归因于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怎么办?
谢谢您的修改。
答案 0 :(得分:0)
您可以像在子div'auto'中那样应用宽度
whenever --update-crontab
tail -f /var/log/syslog | grep CRON
让我知道这是否满足您的要求
答案 1 :(得分:0)
添加以下内容:
.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>