常用CSS自适应屏幕布局

    <!--CSS两列布局,左侧固定，右侧自适应宽度-->
    <div style="width: 100%; margin: 0 auto; overflow: auto; _display: inline-block;">
        <div style="width: 300px; float: left; background-color: gray;">这是左侧内容,固定宽度</div>
        <div style="margin-left: 300px; background-color: lightgray; min-width: 800px;">这是右侧内容,自适应宽度</div>
    </div>

    <!--CSS两列布局,右侧固定，左侧自适应宽度-->
    <div style="width: 100%; margin: 0 auto; overflow: auto; _display: inline-block;">
        <div style="width: 300px; float: right; background-color: gray;">这是右侧内容,固定宽度</div>
        <div style="margin-right: 300px;">这是左侧内容,自适应宽度</div>
    </div>

    <!--CSS三列布局,左侧固定，右侧固定,中间自适应宽度-->
    <div style="width: 100%; margin: 0 auto; overflow: auto; _display: inline-block;">
        <div style="width: 300px; float: left; background-color: lightgray;">这是左侧内容,固定宽度</div>
        <div style="width: 200px; float: right; background-color: darkgray;">这是右侧内容,固定宽度</div>
        <div style="margin-left: 300px; margin-right: 200px;">这是中间内容,自适应宽度</div>
    </div>

    <!--overflow:auto; _display:inline-block; 是清除浮动的，_display:inline-block;针对IE6的。-->

 

转载于:https://www.cnblogs.com/early-moon/articles/3345197.html