本文主要是介绍No.1 实现两列布局 一列定宽,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
<html><head>
//方法1<style>/* .parent{display: fles;display: -webkit-flex;}.left-child{flex:0 100px;background: #22bd7a;}.right-child{flex:1;background: #f60;} */</style>
//方法2<style>/* .left-child{width: 100px;float:left;background: #F60;}.right-child{overflow: hidden;background: #22bd7a;} */</style>
//方法3<style>/* .left-child{width: 100px;float:left;background: #f60;}.right-child{margin-left: 100px;background: #22bd7a;} */</style>
//方法4 <style>/* .parent{position: relative;}.left-child{position: absolute;width: 100px;top: 0;left: 0;background: #f60;}.right-child{margin-left: 100px;background: #22bd7a;} */</style>
//方法5<style>.parent{position: relative;padding-left: 100px;}.left-child{position: absolute;left: 0;top: 0;width: 100px;background: #f60;}.right-child{top: 0;right: 0;background: #22bd7a;}</style></head><body><div class="parent"><div class="left-child"></div><div class="right-child"></div></div></body>
</html>
这篇关于No.1 实现两列布局 一列定宽的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!