两列右侧自适应布局--（来自网易）

转载于 2015-04-22 22:39:00 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/LoveOrHate/p/4448941.html

本文介绍了一种实现网页两列布局的方法：左侧为固定宽度，右侧则采用自适应宽度设计。通过CSS样式设置，使得该布局既简洁又实用，适用于多种网页设计场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="g-bd1 f-cb">
    <div class="g-sd1">
        <p>左侧定宽</p>
    </div>
    <div class="g-mn1">
        <div class="g-mn1c">
            <p>右侧自适应</p>
        </div>
    </div>
</div>

/* 两列右侧自适应布局 */
.g-bd1{margin:0 0 10px;}
.g-sd1{position:relative;float:left;width:190px;margin-right:-190px;}
.g-mn1{float:right;width:100%;}
.g-mn1c{margin-left:200px;}