Question

我正在开发一个响应式设计，其中包含一个包含多个div的“侧边栏”，其确切数量会有所不同 - 但为了这个问题的目的，可以说3或4。

在宽/全/桌面显示器上查看时，侧边栏中的每个div都将垂直堆叠在一起。

使用@media max-width声明时，“侧边栏”将显示在主要内容下方，而不是在检测到窄视口时实际位于侧边。此时，这些div将成对地浮动而不是彼此堆叠，即

.sidebaritem {
    float:left;
    width:50%;
}

没有问题 - 但如果有一个ODD数量的div，我希望LAST div的宽度为100％，以便填充可用空间，而不是宽度：50％ - 留下一个不需要的空白区域（如果没有另外的div可以浮在它旁边。）

希望这里的图片更好地解释：

是否只能使用CSS在最后一个div上应用100％宽度（如果有奇数个），假设所有div都具有相同的类，并且我们提前不知道有多少div ？（我说3或4覆盖奇数/偶数选项，但它可能是1,2,3,4,5,6等。）

我知道这可以用JS完成，但是尽管无法弄清楚它似乎可能是“可行的”使用CSS3选择器的某些组合，这是我正在寻找的，如果可能的话。一个相邻的选择器声明似乎可以做到这一点，但同样，它们都有相同的类 - 所以.sidebaritem + .sidebaritem似乎永远都是真的，无论它是奇数还是偶数。

Answer 1

.sidebaritem:nth-last-child(1):nth-child(odd){
    width:100%;
}

你可以尝试这样的事情。只有在奇数时才选择最后一个元素。