两列布局实现自适应的方法

Posted 2020-08-04 小猪冒泡

注意的是：哪个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;
    }


}