DIV+CSS 自适应布局_html/css_WEB-ITnose
两栏布局,左边定宽200px,右边自适应。如何实现?
我的第一个反应就是:用flex伸缩盒呀,然后balabala...
说完之后,面试官说,还有没有别的方法?flex有些浏览器不支持
嗯...我愣了一下,平常遇到这种问题貌似都是这么写的...
别的方法?我又想了想。JS?对,JS肯定可以。
然后就说,可以用JS获取当前窗口宽度,然后减去200px就是右边的宽度了
面试官:嗯,这样的确可以,但是布局一般不要用JS,还有没有别的方法?CSS的
额,这下我完全愣住了好嘛,人也变得有些紧张。还要别的方法啊,什么方法呢???
哎呀妈呀,想不出来,肿么办...
然后面试官看了我半天,十分体谅的说,那我们进行下一个问题吧...
(以上面试官原话记不大请了,但是意思就是这样~)
回来后,经过百度,哇!原来方法如此之多~还如此简单~
下面就来总结一下~
一、两栏布局(左定宽,右自动)
1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。
举例:
HTML代码:
-
- 我是左栏
- 我是右栏
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- margin: 10px;
- }
- .wrap_left{
- float: left;
- width: 200px;
- background-color: red;
- }
- .wrap_right{
- margin-left: 220px;
- background-color: green;
- }
运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com
2.position + margin
即在父标签设置position属性为relative;子标签中定宽元素设置position属性为absolute;自适应元素设置margin属性,margin-left>=定宽元素宽度。
举例:
HTML代码
-
- 我是左栏
- 我是右栏
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- margin: 10px;
- position: relative;
- }
- .wrap_left{
- position: absolute;
- width: 200px;
- background-color: red;
- }
- .wrap_right{
- margin-left: 220px;
- background-color: green;
- }
运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com
3.float + 负margin
即给自适应宽度元素定义一个父标签,并设置float属性为left;width为100%;自适应宽度元素设置margin,margin-left应>=定宽元素宽度;
固定宽度元素设置margin-left属性为负值:-100%;
除此之外应注意HTML结构中应先写自适应元素,再写固定宽度元素。
举例:
HTML代码
- 我是右栏
-
- 我是左栏
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- float: left;
- width: 100%;
- }
- .wrap .wrap_right{
- margin-left: 220px;
- background-color: green;
- }
- .wrap_left{
- float: left;
- width: 200px;
- margin-left: -100%;
- background-color: red;
- }
运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com
注:使用的float属性,必要时清除一下浮动。
4.用table布局实现
来自评论里@qazxsw的方法:
运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com
不过这个方法,一定要设置高度才可以~
5.触发BFC实现 —— 来自评论里柯南同学@15913127081的方法
关于BFC是什么、怎么触发BFC以及BFC可以用来做什么,大家可以看看这篇,前端精选文摘:BFC 神奇背后的原理(我会告诉你我也是才看的么~哈哈~)
实现方法,即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。(可以触发BFC的属性?继续看上面那个链接!!)
示例:
HTML代码:
-
- 我是左栏
-
- 我是右栏
CSS代码:
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap_left{
- float: left;
- width: 200px;
- background-color: red;
- }
- .wrap_right{
- overflow: hidden;
- background-color: green;
- }
运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com
前面有说到一般我都是用的flex伸缩盒,那也来说一下用flex怎么实现的吧
6.flex伸缩盒方法
即父标签设置display:flex属性,自适应元素设置flex-grow:1;
HTML代码
-
- 我是左栏
- 我是右栏
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- display: flex;
- display: -webkit-flex;
- }
- .wrap_left{
- width: 200px;
- background-color: red;
- }
- .wrap_right{
- flex-grow:1;
- -webkit-flex-grow:1;
- background-color: green;
- }
运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com
进阶
二、三栏布局
掌握了上面的方法,我们会发现制作一个三栏布局也是非常容易的。
下面我们在上面栗子的基础上,看看实现一个两侧定宽,中间自适应的三栏布局如何实现
1. float + margin(两侧定宽,中间自适应)
HTML代码:
-
- 我是左栏
-
- 我是右栏
-
- 我是中间栏
CSS代码:
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap_left{
- width: 200px;
- float: left;
- background-color: red;
- }
- .wrap_content{
- margin-left: 220px;
- margin-right: 220px;
- background-color: yellow;
- }
- .wrap_right{
- width: 200px;
- float: right;
- background-color: green;
- }
运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com
2. position + margin(两侧定宽,中间自适应)
HTML代码:
- 我是左栏
-
- 我是右栏
-
- 我是中间栏
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap_left{
- width: 200px;
- position: absolute;
- background-color: red;
- left: 0;
- }
- .wrap_content{
- margin-left: 220px;
- margin-right: 220px;
- background-color: yellow;
- }
- .wrap_right{
- width: 200px;
- position: absolute;
- right: 0;
- background-color: green;
- }
运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com
3.float + 负margin(两侧定宽,中间自适应)
HTML代码
- 我是中间栏
-
- 我是左栏
-
- 我是右栏
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- float: left;;
- width: 100%;
- }
- .wrap_left{
- width: 200px;
- float: left;
- margin-left: -100%;
- background-color: red;
- }
- .wrap_content{
- margin-left: 220px;
- margin-right: 220px;
- background-color: yellow;
- }
- .wrap_right{
- width: 200px;
- float: left;
- margin-left: -200px;
- background-color: green;
- }
运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com
4.table实现
运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com
5.BFC方法
HTML代码
-
- 我是左栏
-
- 我是右栏
-
- 我是中间栏
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap_left{
- float: left;
- width: 200px;
- background-color: red;
- }
- .wrap_right{
- float: right;
- width: 200px;
- background-color: green;
- }
- .wrap_content{
- overflow: hidden;
- background-color: yellow;
- }
运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com
注:HTML中先写定宽元素,再写自适应宽度元素。
6.flex伸缩盒
即父标签设置display:flex属性,自适应元素设置flex-grow:1;
HTML代码
-
- 我是左栏
- 我是中间栏
- 我是右栏
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- display: flex;
- display: -webkit-flex;
- }
- .wrap_left{
- width: 200px;
- background-color: red;
- }
- .wrap_right{
- width: 200px;
- background-color: green;
- }
- .wrap_content{
- flex-grow:1;
- -webkit-flex-grow:1;
- background-color: yellow;
- }

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前
