浅谈实现两个div并列的多种方法
2017-03-16 11:10
260 查看
方法一:float
方法二:display:table-cell
方法三:负margin
方法四:绝对定位
方法五:flex布局
#div1{ width:50%; height:300px; background:blue; float:left; } #div2{ width:50%; height:300px; background:green; float:left; }
方法二:display:table-cell
#parent{ width:100%; display:table; } #div1{ width:50%; height:300px; background:blue; display:table-cell; } #div2{ width:50%; height:300px; background:green; display:table-cell; }
方法三:负margin
#parent{ display:flex; overflow:hidden; } #div1{ width:50%; height:300px; background:blue; padding-bottom:2000px; margin-bottom:-2000px; } #div2{ width:50%; height:300px; background:green; padding-bottom:2000px; margin-bottom:-2000px; }
方法四:绝对定位
*{ margin:0; padding:0; } #div1{ width:50%; height:300px; background:blue; position:absolute; left:0; top:0; } #div2{ width:50%; height:300px; background:green; position:absolute; transform:translate(100%, 0); }
方法五:flex布局
#parent{ display:flex; } #div1{ width:50%; height:300px; background:blue; flex:1; } #div2{ width:50%; height:300px; background:green; flex:1; }
相关文章推荐
- 让两个Div并排显示的多种方法
- 让两个Div并排显示的多种方法
- 实现让两个DIV横向排列方法揭秘
- js实现两个div左右并列显示,并实现点击标题,切换内容显示
- 由于设计页面需要,要把两个并排显示的 div 实现一样高的效果, n 行 n 列布局,每列高度(事先并不能确定哪列的高度)相同,每个设计师追求的目标。方法有以下几种: 1 JS 实现(判断 2 个 d
- 将两个div左右并列显示并实现点击标题切换内容
- 将两个div左右并列显示并实现点击标题切换内容
- (礼拜一log)前端开发:<td> 标签的 colspan 属性 & 两个div并排、一个宽度固定的实现方法
- 请自己实现两个整数变量的交换(多种方法)
- 纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中
- 多种方法实现div两列等高(收集整理)
- css圆角的多种效果及实现方法
- javascript实现时钟的多种方法
- 用javascript实现div可编辑的常见方法
- 用javascript实现div可编辑的常见方法
- 判断一个字符串是否全是数字的多种方法及其性能比较(C#实现)--来源CSDN
- checkbox实现全选的多种方法
- 实现div可编辑的常见方法总结
- 绘制不规则位图方法总结,多种实现方法,全面测试比较
- 可编辑Select下拉列表控件实现方法(非DIV模拟)