首页 > 代码库 > 两列布局实现自适应的方法
两列布局实现自适应的方法
注意的是：哪个div（即固定宽度的那个div）设置了浮动，哪个div标签放在html前面
两列布局，左侧div自适应，右侧div固定宽度：
<div class="my-line"> <div class="line-right">北京京东尚科信技术司</div><!--右侧div宽度固定，所以设置了右浮动，放在前面--> <div class="line-left">所在公司：</div> </div>
相应的css代码：
.my-line{ width:100%; padding:10px; border-bottom:1px solid red; .line-left{ margin-right:205px; background: yellow; } .line-right{ width:200px; background: green; float: right; }}
两列布局，左侧div固定，右侧div自适应：
<div class="my-line"> <div class="line-left">所在公司：</div> <!--左侧div宽度固定，所以设置了左浮动，放在前面-->
<div class="line-right">北京京东尚科信技术司</div> </div>
对应的css：
.my-line{ width:100%; padding:10px; border-bottom:1px solid red; .line-left{ width:100px; float: left; background: yellow; text-align:right; } .line-right{ margin-left:105px; background: green; }}
两列布局实现自适应的方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。