div下显示不同的html显示1个,【css】——根据div个数显示不同的样式

这里记录面试融众集团的一道题

Q：说可能有1~3个item显示在同一行，而item的个数不一定，如果1个，那这个item占宽100%，2个时每一个50%，3个时每一个33%，用纯CSS实现。

A：先贴答案。

section {

width: 100%;

}

.item {

float: left;

width: 100%;

background: #ccc;

margin: 4px 0;

text-align: center;

}

div:first-child:nth-last-child(2),

div:first-child:nth-last-child(2) ~ div {

width: 50%;

}

div:first-child:nth-last-child(3),

div:first-child:nth-last-child(3) ~ div {

width: 33.33%;

}

item1

item2

item3

解释：主要考量对CSS3选择器的熟悉程度，div:first-child:nth-last-child(2) 指选择具有相同父元素的第一个div，同是这个div也是倒数第二个元素，这就说明存在两个具有相同父元素的div。~选择相邻元素。

css 实现div内显示两行或三行，超出部分用省略号显示

一.div内显示一行,超出部分用省略号显示 white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; 二.div内显示 ...

【转】div居中代码 DIV水平居中显示CSS代码