基本上,我想让孩子的divs在父div中平均分配,如果其中一个子div被删除,其余的应该调整大小并再次均匀填满剩余的空间。
例如:
---parent--------------- | -------------------- | | | child | | | -------------------- | | -------------------- | | | child | | | -------------------- | | -------------------- | | | child | | | -------------------- | ------------------------
现在当一个小孩div被删除时,它应该成为
---parent--------------- | -------------------- | | | child | | | | | | | | | | | -------------------- | | -------------------- | | | child | | | | | | | | | | | -------------------- | ------------------------
现在,我只想用纯粹的html / css来做,但是目前我找不到解决方案。
我正在考虑的另外两种方法是:
>使用javascript计算高度
>为一堆场景创建不同的类(例如:
2个小孩,3个小孩,4个小孩等等),然后加载它们
因此与PHP
任何人有更好的主意?
解决方法
使用
css tables与桌布:固定 – 不需要javascript。
要查看这个工作单击“检查元素”上面的小提琴的一个li元素,然后右键单击“删除节点”和walla! – 正是你需要的
<ul> <li><span>Item1</span></li> <li><span>Item1</span></li> <li><span>Item1</span></li> <li><span>Item1</span></li> </ul>
CSS
ul { display: table; table-layout: fixed; width: 100%; border: 1px solid #c2c2c2; -moz-Box-sizing: border-Box; Box-sizing: border-Box; } li { text-align: center; display: table-row; background: pink; } span { display: table-cell; vertical-align: middle; border-top: 1px solid green; }