CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?...

Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是:

实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图:

肯定有人心里犯嘀咕了,哈~这么简单,不就是全部左浮动嘛,这也好意思拿出来讲?别急啊,其实里面的坑还是挺多的,且待我一个个填上。

1. 通过左浮动实现

  1. 要实现这样一个布局,我们首先需要如下的 HTML:
    <div id="float-container"><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div>
    </div>
  2. 然后开始写 CSS 吧,就像这样:
    #float-container {background-color: red;
    }
    .float-element {float: left;width: 50px;height: 30px;background-color: blue;margin: 10px;
    }

    使每个小容器向左浮动,再设定一个边距,一个根据浏览器宽度自适应变化位置的浮动布局就搞定收工了?当然不会,效果会像这样:

  3. 咦,说好的红色背景大容器呢,怎么躲起来啦?检查一番,原来是忘了给大容器 div 设定宽高度了,那就设定一下宽高度。既然要求了大容器自适应,那么我们就分别设定为 100% 吧:
    #float-container {background-color: red;height: 100%;width: 100%;
    }
    .float-element {float: left;width: 50px;height: 30px;background-color: blue;margin: 10px;
    }

    好啦,刷新一下。大容器咋还是没出来?

  4. 现在让我们分析一下吧,为何看不见大容器?因为 div 如果没有包裹元素的话,百分比宽高度是不会产生效果的。

    那么为什么大容器明明包裹着九个 div,百分比宽高度却没有产生效果呢?因为小容器都设定为左浮动,已经脱离文档流,大容器并没有包围小容器,表现出高度为0(高度塌陷)。接下来我们想要大容器自适应,又不想使小容器失去浮动的特性,能够随着宽度变化自动调整每一行的个数,应该怎么办?我们需要闭合浮动元素,使其包含框表现出正常的高度。是时候请出我们的 BFC 大神啦,对,我已经连续三篇实例博文提到 BFC 原理了,因为这个原理就是这么有用啊(该处原理的详细介绍请参考一丝大神的《那些年我们一起清除过的浮动》)。现在我们在大容器加上 overflow: hidden; 就可以自动清理其包含的任何浮动元素,接下来看看最终的 DEMO,试着调整一下宽度,是不是已经实现了想要的效果?

    See the Pen float-container by xal821792703 (@honoka) on CodePen.

2. 通过 inline-block 实现

只能通过左浮动完成这个实例?并不是,我们还有 inline-block。inline-block 可以像行内元素一样水平地依次排列,但框的内容仍然符合块级框的行为。通过这一特性,我们可以利用 inline-block 像浮动一样创建很多网格铺满容器,并且不需要清除浮动。当然整个布局过程也比左浮动简便了一些,如下面的 DEMO:

See the Pen inline-block-container by xal821792703 (@honoka) on CodePen.


 最后感谢大家的阅读,欢迎前往我的 repo 查看源代码整理,有任何问题也请尽情向我吐槽。

转载于:https://www.cnblogs.com/honoka/p/5164616.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/272399.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于框架编写驱动代码

操作驱动的上层代码&#xff08;pin4test&#xff09; #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h>void main() {int fd,data;fd open("/dev/pin4",O_RDWR);if(fd<0){printf("open fail…

nacos在windows下安装

1:访问https://github.com/alibaba/nacos/releases下载nacos 2:下载到本地解压 3:点击startup.cmd 启动nacos 4:访问 http://127.0.0.1:8848/nacos 输入账号和密码&#xff0c;nacos/nacos

关于SQL优化这些你了解吗?

背景在当今这个互联网的时代无非要解决两大难题&#xff0c;其一是信息安全&#xff0c;其二就是数据的存储。而信息安全则是在数据存储的基础之上。一个公司从刚开始成立到发展成一个有上百人甚至上千人团队的时候&#xff0c;公司的业务量是呈上升趋势&#xff0c;客户及用户…

图片安全保护(未启动)

图片安全保护&#xff08;未启动&#xff09; 图片安全保护&#xff08;未启动&#xff09;posted on 2016-01-27 22:54 代码35 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/xinglizhenchu/p/5164847.html

微机总线地址,物理地址 ,虚拟地址

总线地址 地址总线 (Address Bus&#xff1b;又称&#xff1a;位址总线) 属于一种电脑总线 &#xff08;一部份&#xff09;&#xff0c;是由CPU 或有DMA 能力的单元&#xff0c;用来沟通这些单元想要存取&#xff08;读取/写入&#xff09;电脑内存元件/地方的实体位址。 自己…

Navicat远程连接linux下mysql服务器1045错误解决办法在这儿

1&#xff1a;首先通过xshell工具或者你熟悉的工具连接远程linux下的服务器 mysql -uroot -p 然后输入密码 2.进行授权 如果想root用户使用password从任何主机连接到mysql服务器的话。 GRANT ALL PRIVILEGES ON *.* TO root% IDENTIFIED BY 你的mysql密码 WITH GRANT O…

内存划分

一、内存分配 一个由C/C编译的程序占用的内存分为以下几个部分 1、栈区&#xff08;stack&#xff09;&#xff1a; 由编译器自动分配释放 &#xff0c;存放函数的参数值&#xff0c;局部变量的值等。其操作方式类似于数据结构中的栈。 2、堆区&#xff08;heap&a…

树莓派 博通BCM2835芯片手册

手册提取链接 链接&#xff1a;https://pan.baidu.com/s/1fdmIBNn1Pr1j3-ercNhKJg 提取码&#xff1a;8y1b 驱动的两大利器&#xff1a; 1、电路图:通过电路图找到寄存器 2、芯片手册 树莓派有54个通用IO口(0到53)&#xff0c;所有GPIO口至少有两个可选功能&#xff08;输入输…

MVC实现实现文件流打包成压缩包

MVC实现实现文件流打包成压缩包1、使用压缩类库SharpZipLib SharpZipLib 是一款比较经典实用C#压缩类库SharpZipLib 库特点&#xff1a;功能丰富、稳定 &#xff0c;支持主流 zip、Gzip Tar BZip2 格式2、项目中引用SharpZipLib的官方地址是&#xff1a;http://icsharpcode.git…

Intellij idea 报错:Error : java 不支持发行版本5

idea运行出现了这个错误 解决办法按下图所示&#xff1a;

属性“dataProvider”有多个初始值设定项。(注意:“dataProvider”是“mx.charts.BarChart”的默认属性)。...

1、错误描写叙述 属性“dataProvider”有多个初始值设定项。&#xff08;注意:“dataProvider”是“mx.charts.BarChart”的默认属性&#xff09;。2、错误原因 <?xml version"1.0" encoding"utf-8"?> <s:Application xmlns:fx"http://ns.…

IO口操控代码

我们在编写驱动程序的时候&#xff0c;IO空间的起始地址是0x3f000000,加上GPIO的偏移量0x2000000,所以GPIO的物理地址应该是从0x3f200000开始的&#xff0c;然后在这个基础上进行Linux系统的MMU内存虚拟化管理&#xff0c;映射到虚拟地址上。 底层驱动代码 #include <linu…

C#一些实用的函数

1.DateTime 转为Unix的long的时间戳long orderTime order.AddTime.ToUnixTimeStamp("Milliseconds");long payTime order.StartTime.Value.ToUnixTimeStamp("Milliseconds");2、获取客户端IP/// <summary>/// 获取调用方的IP地址/// </summary&…

Vscode如何新建html文件

1、点击Open Folder&#xff1a; 2、选择目标文件夹&#xff0c;在本地新建一个拓展名为html的文件&#xff1a; 3、在第1行输入!&#xff08;英文状态下&#xff09;&#xff0c;按tab键&#xff0c;新建成功。界面如下图所示&#xff1a;

混合app

cordova run android 把应用发送到手机ionic serve 电脑浏览器调试命令创建&#xff1a;cordova create hello com.example.hello HelloWorldcd hellocordova platform add androidcordova build androidcordova emulate android查询cordova platform lscord…

vscode浏览器打开html

1.点击拓展 2.输入open in browser&#xff0c;选择第一个 3.点击安装

VMware虚拟机克隆CentOS后网卡修改方法

转自:http://www.linuxidc.com/Linux/2015-03/114975.htm 转载于:https://www.cnblogs.com/water-sky/p/5169107.html

NET Core入门笔记

一、NET Core概念.NET Core 是开放源代码通用开发平台&#xff0c;由 Microsoft 和 .NET 社区在 GitHub 上共同维护。 它跨平台&#xff08;支持 Windows、macOS 和 Linux&#xff09;&#xff0c;并且可用于生成设备、云和 IoT 应用程序。&#xff08;MSDN&#xff09;二、NET…

解决redis-cli连接时出现Could not connect to Redis at 127.0.0.1:6379: Connection refused

解决redis-cli连接时Could not connect to Redis at 127.0.0.1:6379: Connection refused 原因&#xff1a;服务端未启动 [rootlocalhost bin]# ./redis-server redis.conf [rootlocalhost bin]# redis-cli -bash: redis-cli: 未找到命令 [rootlocalhost bin]# ./redis-cli 1…

ASP.NET MVC的过滤器笔记

过滤器概念APS.NET MVC中&#xff08;以下简称“MVC”&#xff09;的每一个请求&#xff0c;都会分配给相应的控制器和对应的行为方法去处理&#xff0c;而在这些处理的前前后后如果想再加一些额外的逻辑处理。这时候就用到了过滤器。1、过滤器&#xff08;Filters&#xff09;…