【css】css2实现两列三列布局的方法
2018-06-24 01:57:11来源:未知 阅读 ()
前言
对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题。楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要用基本的 css2 中的属性布局,傻掉了。。。
要求:两列布局,左边定宽,右边自适应
html 布局如下
<div id="father"> <div id="left">我是定宽左</div> <div id="right">我是自适应右</div> </div>
1. flex 布局
#father{ display: flex; } #left{ background: red; height: 200px; width: 200px; } #right{ background: green; height: 200px; flex:1; }
2. css2 普通布局
<style> #left{ background: red; height: 200px; width: 200px; float:left; } #right{ background: green; height: 200px; margin-left:200px; } </style>
注意:
多列布局时需要将浮动元素的 html 代码写在自适应元素的前面。如以下为三列布局的代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } #div1{ width: 200px; height: 200px; background: red; float:left; } #div2{ margin-left: 200px; margin-right: 200px; height: 200px; background: green; } #div3{ width: 200px; height: 200px; background: red; float:right; } </style> </head> <body> <div id="box"> <div id="div1">我是左定宽</div> <div id="div3">我是中间自适应</div> <div id="div2">我是右定宽</div> </div> </body> </html>
效果如图:
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:分歧者3 观后感
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash