【css】——根据div个数显示不同的样式
这里记录面试融众集团的一道题
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个数显示不同的样式的更多相关文章
- css 实现div内显示两行或三行,超出部分用省略号显示
一.div内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二.div内显示 ...
- 【转】div居中代码 DIV水平居中显示CSS代码
原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...
- CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容
CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...
- (转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)
一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...
- css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- jQuery改变CSS使DIV显示
HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...
- css美化Div边框的样式实例*(转载)
css美化Div边框的样式实例 很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...
- Div+CSS+JQuery实现选项卡,即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。
1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
随机推荐
- Web前端工程师常去的15个技术网站
1.CSDN 网址:https://www.csdn.net/ 简介: CSDN (Chinese Software Developer Network) 创立于1999年,是中国最大的IT社区和服务 ...
- laravel使用$errors提取错误信息
1.控制器 2.模板
- JVM知识
堆(Heap)和非堆(Non-heap)内存 简单来说堆就是Java代码可及的内存,是留给开发人员使用的:非堆就是JVM留给 自己用的. 堆内存分配 JVM初始分配的内存由-Xms指定,默认是 ...
- 13.8.8 div块 居中
<div style="border:1px solid blue;width:760px; height:410px; position:absolute; left:50%; to ...
- circos 绘制关系型图ribbon,并加入透明度
luminance = lum80<<include colors_fonts_patterns.conf>><colors># r,g,b,a color def ...
- [开源,学习,分享]UWP第三方简书客户端分享
简介 Windows10正式版发布到现在,我利用零零碎碎的一些时间对UWP进行一些学习,也基于这门技术开发了一个第三方的简书App. 基本界面 优酷视频: http://v.youku.com/v_s ...
- Android教程:wifi热点问题
http://www.linuxidc.com/Linux/2012-05/60718.htm 现在很多移动设备都提供wifi hostpot功能,使用方便,也省下了原来无线路由器的成本.wifi和w ...
- VHDL数据类型
VHDL表示16进制 如 a : std_logic_vector(7 downto 0) 把0x55赋给a a <= x"55"; b表示二进制 b“1011_1111” ...
- PHP数据库抽象层--PDO(PHP Data Object) [一]
1.简介:(PDO数据库访问抽象层,统一各种 数据库的访问接口 ) PHP 数据对象 (PDO) 扩展为PHP访问数据库定义了一个轻量级的一致接口.实现 PDO 接口的每个数据库驱动可以公开具体数据库 ...
- Visual C++中的ADO编程
摘 要:本文介绍了微软推出的以ActiveX技术为基础的ADO数据存取技术,分析了ADO的工作原理,并用Visual C++说明了ADO数据访问技术的实现方法. 关键字:ADO:连接对象:OLE D ...