2022-03-18 627
在77ISP学技术
每日笔记,实例并排浮动框,css并排浮动框,css浮动框框实
等宽的框
在上例中,您学习了如何以相等的宽度并排浮动框。但是,创建具有相同高度的浮动框并不容易。不过,快速解决方案是设置一个固定的高度,如下例所示:
实例
.box { height: 500px; }
Box 1
Some content, some content, some content
Box 2
Some content, some content, some content
Some content, some content, some content
Some content, some content, some content
这个例子不是很灵活。如果可以保证框中始终有相同数量的内容,则可以使用 CSS 高度,但并非总是如此。如果您在手机上尝试上例(或调整浏览器窗口的大小),则会看到第二个框的内容将显示在框的外部。
如果这不是您想要的,请返回教程并学习另一个解决方案。
这么做就失去了弹性。如果可以保证框中始终有相同数量的内容,那是可以的。但是很多时候,内容是不一样的。如果您在手机上尝试上例,则会看到第二个框的内容将显示在框的外部。这是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长:
实例
使用 Flexbox 创建弹性框:
请尝试调整浏览器窗口的大小,以查看弹性布局。
注释:Internet Explorer 10 或更早的版本不支持 Flexbox。
原文链接:https://77isp.com/post/746.html
=========================================
https://77isp.com/ 为 “云服务器技术网” 唯一官方服务平台,请勿相信其他任何渠道。
数据库技术 2022-03-28
网站技术 2023-01-07
网站技术 2022-11-26
网站技术 2022-11-17
Windows相关 2022-02-23
网站技术 2023-01-14
Windows相关 2022-02-16
Windows相关 2022-02-16
Linux相关 2022-02-27
数据库技术 2022-02-20
小游客游戏攻略网游戏攻略网 2024年07月26日
抠敌 2023年10月23日
嚼餐 2023年10月23日
男忌 2023年10月22日
瓮仆 2023年10月22日
扫码二维码
获取最新动态