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

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

A:先贴答案。

  <style>
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%;
}
</style> <section>
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</section>

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

参考:

:nth-child和:nth-of-type之间的差异

【css】——根据div个数显示不同的样式的更多相关文章

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

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

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

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  3. CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

  4. (转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  5. css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  6. jQuery改变CSS使DIV显示

    HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...

  7. css美化Div边框的样式实例*(转载)

    css美化Div边框的样式实例   很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...

  8. Div+CSS+JQuery实现选项卡,即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。

    1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   ...

  9. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

随机推荐

  1. Web前端工程师常去的15个技术网站

    1.CSDN 网址:https://www.csdn.net/ 简介: CSDN (Chinese Software Developer Network) 创立于1999年,是中国最大的IT社区和服务 ...

  2. laravel使用$errors提取错误信息

    1.控制器 2.模板

  3. JVM知识

    堆(Heap)和非堆(Non-heap)内存 简单来说堆就是Java代码可及的内存,是留给开发人员使用的:非堆就是JVM留给 自己用的. 堆内存分配     JVM初始分配的内存由-Xms指定,默认是 ...

  4. 13.8.8 div块 居中

    <div style="border:1px solid blue;width:760px; height:410px; position:absolute; left:50%; to ...

  5. circos 绘制关系型图ribbon,并加入透明度

    luminance = lum80<<include colors_fonts_patterns.conf>><colors># r,g,b,a color def ...

  6. [开源,学习,分享]UWP第三方简书客户端分享

    简介 Windows10正式版发布到现在,我利用零零碎碎的一些时间对UWP进行一些学习,也基于这门技术开发了一个第三方的简书App. 基本界面 优酷视频: http://v.youku.com/v_s ...

  7. Android教程:wifi热点问题

    http://www.linuxidc.com/Linux/2012-05/60718.htm 现在很多移动设备都提供wifi hostpot功能,使用方便,也省下了原来无线路由器的成本.wifi和w ...

  8. VHDL数据类型

    VHDL表示16进制 如 a : std_logic_vector(7 downto 0) 把0x55赋给a a <= x"55"; b表示二进制 b“1011_1111” ...

  9. PHP数据库抽象层--PDO(PHP Data Object) [一]

    1.简介:(PDO数据库访问抽象层,统一各种 数据库的访问接口 ) PHP 数据对象 (PDO) 扩展为PHP访问数据库定义了一个轻量级的一致接口.实现 PDO 接口的每个数据库驱动可以公开具体数据库 ...

  10. Visual C++中的ADO编程

    摘  要:本文介绍了微软推出的以ActiveX技术为基础的ADO数据存取技术,分析了ADO的工作原理,并用Visual C++说明了ADO数据访问技术的实现方法. 关键字:ADO:连接对象:OLE D ...