CSS右边固定左边自适应布局

文章参考

http://www.111cn.net/cssdiv/css/67615.htm

下面的例子是其中一种:

<style>

    .left{
        width: 100%;
        border: 1px solid green;
        margin-right: 300px;
        /* 左侧div 没有浮动,如果设置了浮动,则两个div的宽度超过100%,会换行*/
        /*float: right;*/

    }
    .right{
        /*右侧固定的宽度*/
        width: 200px;
        border: 1px solid blue;
        float: right;
    }

</style>
<body>
    <div style="border: solid 1px red;overflow: hidden">
        <!-- 注意左右div的上下顺序,float:right代码前面的排在最右边,依次类推 -->
        <div class="right">
            右侧固定宽度
        </div>
        <div class="left">
            左侧自适应
        </div>
    </div>
</body>

相关推荐