DIV_CSS布局问题:3个水平对齐布局的DIV,左右固定宽,中间宽度自动填充
来源:互联网 发布:nuts二战知乎 编辑:程序博客网 时间:2024/05/02 03:05
作为一个前端小白,这是我面试前端职位的题目之一,没有实践经验,误打误撞,最后还是错了!
今天难得有时间,认真思考了一下。答案不一定最佳的解决方案,但是能实现同等效果。
问题描述:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为200px,中间那个DIV充满剩余的宽度。
这个题目是我当时做的第一个题目,看完题目就把答案写出来了:不就是一个float:left;的事情吗!(实践出真知,被事实赤裸裸的打败了!)
我笔试提交的代码:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style type="text/css"> .mainwrap{ width: 1000px; margin: 0 auto; height: 300px; } .left{ width: 150px; height: 100%; background: yellow; float: left; } .right{ width: 150px; height: 100%; background: pink; float: left; } .center{ width: auto; height: 100%; background: green; float: left; } </style></head><body> <div class="mainwrap"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div></body></html>面试官的评价:这个代码是得不到你的目标效果的。
当时他没继续追究转移了问题,后来我在电脑上尝试运行了一下代码,结果如下:
center不见了!
确实不是目标效果!顿时不知道发生了什么事!但是我明白了面试官的评价:这个代码是得不到你的目标效果的(你对HTML+CSS还不够深入)!
但是还很庆幸题目这么简单,看到这个结果才发现自己掉进面试官设计的坑都不知道!
面试都过去快5个月了,在项目中遇到类似的问题都只能把中间的div作为固定div处理,一直没认真地寻找过这个问题的解决方案。总是以小白为借口,真的错了解决很多经典问题的机会。回到正题,今天认真思考了一下,这不一定是一个最佳的解决方案,但是可以达到目标效果,代码如下:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style type="text/css"> .mainwrap{ width: 1000px; margin: 0 auto; height: 300px; } .left{ width: 150px; height: 100%; background: yellow; float: left; } .right{ width: 150px; height: 100%; background: pink; float: right; position: relative; top: -100%; } .center{ width: auto; height: 100%; background: green; /*float: left;*/ } </style></head><body> <div class="mainwrap"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div></body></html>
运行效果:
有这个问题有一个延伸问题;相反的,中间的div固定,左右均分剩下的宽度。
其实能解决上面那个问题,这个问题就很开放了,实现方式有很多,比如:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style type="text/css"> .mainwrap{ width: 1000px; margin: 100px auto; height: 300px; border: 1px solid #ff0000; } .left{ width: 50%; height: 100%; background: yellow; float: left; } .right{ width: 50%; height: 100%; background: pink; float: right; position: relative; top: -100%; } .center{ width: 600px; margin: 0 auto; height: 100%; background: green; /*float: left;*/ position: relative; z-index: 1000; } </style></head><body> <div class="mainwrap"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div></body></html>
Done!
还有谁于更好的解决方案吗?求赐教!
1 0
- DIV_CSS布局问题:3个水平对齐布局的DIV,左右固定宽,中间宽度自动填充
- 【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)
- 三栏自适应布局实现(左右固定宽度,中间自适应)
- 淘宝双飞翼布局,左右固定中间自适应宽度。
- 三列布局(左右固定宽度,中间自适应)
- css 左右固定,中间自适应的布局
- 3列布局左右自适应中间固定
- 三列布局(左右宽度固定,中间自适应)的五种解决方案
- 关于3个div在一行,左右固定宽度,中间自适应
- 页面布局:三栏布局,假设高度已知,左右宽度固定为300px,中间自适应。
- 水平自适应居中 宽高固定的div 宽高不知道的div 左右两边固定宽度div
- css 左边固定宽度,右边自动填充的布局,不用flex
- CSS布局:左右固定宽,中间自适用。
- CSS-两侧固定宽度,中间自适应的三列布局
- 网页布局,左右固定,中间自适应
- 三列布局-左右固定,中间自适应
- 三栏布局:左右固定,中间自适应
- android 布局:两端对齐中间填充
- Xcode的快捷键及代码格式化
- 快速排序分析
- HDU5339——Untitled
- 关于iOS推送中点击通知的几点(备忘)
- 红黑树
- DIV_CSS布局问题:3个水平对齐布局的DIV,左右固定宽,中间宽度自动填充
- shell常用命令
- 【前端学习笔记】深入学习Javascript:DOM机制
- Android4.4深入浅出之SurfaceFlinger总体结构
- js前台分页显示后端JAVA数据响应
- Hibernate 学习笔记
- R语言饼图的绘制
- Yslow-23条规则
- xcode 中的LLDB常用调试命令