本文主要介绍了flex和传统方式实现左右两栏式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
1.混合浮动+普通流
混合浮动+普通流
父级:宽度固定
left:宽度固定。浮动起来
right:宽度和父级一样,设定margin-right:left的宽度px,宽度随父级变化而变化(固定+自适应)
Title
效果
2.flex方式
父级:display:flex
left:flex : 0 0 200px(固定200px,不放大也不缩小)
right:flex:1(会随父级变化)
(固定+自适应)
Title 5555
下来我们讨论一下其他的
上面flex的代码,当我们把他的主轴方向变了之后
会发现right的高度是由内容撑开的 (因为把字体去掉发现这块消失)
注意:
也就是说,当主轴方向是row的情况下,左边设置宽度,右边flex:1。右边宽度为总的宽度-左边宽度
当主轴方向为 column时,上面设置高度,宽度和父级一直,下边flex:1。下面设置高度无效,由内容决定.
3.纯浮动
父级:定宽,清浮动(overflow:hidden)
left,right:定宽,定高,float:left
两边都固定
Title
4.定位法
父级:定宽,position:relative
left: 定宽高: position: absolute top: 0 left: 0
right: 定宽高: position: absolute top: 0 right 0
两边都固定
Title
到此这篇关于flex和传统方式实现左右两栏式的文章就介绍到这了,更多相关flex和传统方式左右两栏式内容请搜索0133技术站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持0133技术站!
以上就是flex和传统方式实现左右两栏式的详细内容,更多请关注0133技术站其它相关文章!