是否可以根据父级中的 div 数调整父级中 div 的大小？答案

【问题标题】：Is it possible to adjust the size of a div in a parent based on the count of divs inside the parent?是否可以根据父级中的 div 数调整父级中 div 的大小？
【发布时间】：2014-07-26 03:38:12
【问题描述】：

我想根据 div 的数量来调整 div 内部父级的大小？

例如：

假设父尺寸是 900px

如果父级内部只有一个div，我想要它的大小100%
如果父级中有两个div，我希望两者大小相同：50%
如果父级中有三个div，我希望两者大小相同：33,33333%
如果父级中有四个div，我希望两者大小相同：25%
(...)

div的最大数量是4，但可以更多。

是否可以仅在 CSS 中实现？

【问题讨论】：

看我的回答here

标签： html css multiple-columns

【解决方案1】：

是的

这里是 CSS：

/* one item */
div:nth-child(1):nth-last-child(1) {
width: 100%;
}

/* two items */
div:nth-child(1):nth-last-child(2),
div:nth-child(2):nth-last-child(1) {
width: 50%;
}

/* three items */
div:nth-child(1):nth-last-child(3),
div:nth-child(2):nth-last-child(2),
div:nth-child(3):nth-last-child(1) {
width: 33.3333%;
}

/* four items */
div:nth-child(1):nth-last-child(4),
div:nth-child(2):nth-last-child(3),
div:nth-child(3):nth-last-child(2),
div:nth-child(4):nth-last-child(1) {
width: 25%;
}

一个更短的解决方案是：

/* one item */
div:first-child:nth-last-child(1) {
width: 100%;
}

/* two items */
div:first-child:nth-last-child(2),
div:first-child:nth-last-child(2) ~ div {
width: 50%;
}

/* three items */
div:first-child:nth-last-child(3),
div:first-child:nth-last-child(3) ~ div {
width: 33.3333%;
}

/* four items */
div:first-child:nth-last-child(4),
div:first-child:nth-last-child(4) ~ div {
width: 25%;
}

【讨论】：

耶！效果很好！这个字符~ 是什么意思？
是否可以使用这种语法使其在 IE 上工作？示例：div:nth-child(1):nth-last-child(3) 类似于 div:first-child + div + div
~是兄弟姐妹选择器，它将从之前选择的元素中选择所有兄弟姐妹
我认为这会起作用，看到这个问题：stackoverflow.com/questions/8492121/ie8-nth-child-and-before

【解决方案2】：

SCSS 中的代码

@for $i from 1 through 4 {
  li:first-child:nth-last-child(#{$i}),
  li:first-child:nth-last-child(#{$i}) ~ li {
    width: 100% / $i
  }
}

【讨论】：

【解决方案3】：

是的，可以。使用display: table;display: table-row和display: table-cell。

它的工作方式类似于表结构。

Check this

CSS

.table {
  display: table;
  width: 100%;
  margin-bottom: 10px
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #ccc;
}

【讨论】：

您需要为表格单元格添加宽度，否则这将不适用于内容 - codepen.io/anon/pen/kqeAu
为什么您的代码可以添加宽度 25% 和 2 或 3 个单元格...我不明白...使用相同的代码，我的单元格保持相同的大小：25%
我们只需要指定宽度，也可以设置宽度：50%;
@Steffi 你能在你的代码不起作用的地方发布一个小提琴吗，tushar 50% 不适用于超过 2 个单元格的表格

【解决方案4】：

这将使用 javascript、html 和 css 工作。

HTML

<div id="outerDiv">

    <div class="innerDiv">
        hello
    </div>
 <div class="innerDiv">
        hello
    </div>
</div>

CSS

#outerDiv
{
   min-height: 500px;
    height:500px;/* any height you want. */
   width:250px; /* any width you want. */
   max-width:250px; /* any whatever width you want. */
border-style: solid;
    border-width: 2px;

}
.innerDiv{


/* height is set using JS */
   width:250px; /* same as outer div */
   max-width:250px; /* same as outer div */
border-style: solid;
    border-width: 1px;
    border-color: red;

}

<script>
    window.onload=function(){
var x=parseInt(document.getElementsByTagName("div").length)
    x=x-1;
var y=Math.round(100/x);
var z=document.getElementsByClassName("innerDiv");
    for(var i=0;i<x;i++){
    z[i].style.height=y+"%";
    }

}
</script>

这是小提琴http://jsfiddle.net/6SMqw/2/

您可以在外部 div 中添加任意数量的内部 div，只需保持类名 (innerDiv) 相同即可。

【讨论】：

你没看到大粗体“only in css”
哎呀！！ ..错过了..感谢您的指点。无论如何我不会删除它以防有人将来需要引用它，它没有错，所以不会伤害。