三列中间自适应布局--(来自网易)

爱不到要偷

于 2015-04-23 20:29:00 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

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

本文详细介绍了如何实现网页中三列布局，其中中间部分自适应调整宽度，左右两侧保持固定宽度。通过CSS样式设置，实现了响应式设计，确保不同设备上的良好展示效果。

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

<div class="g-bd5 f-cb">
    <div class="g-sd51">
        <p>左侧定宽</p>
    </div>
    <div class="g-mn5">
        <div class="g-mn5c">
            <p>中间自适应</p>
        </div>
    </div>
    <div class="g-sd52">
        <p>右侧定宽</p>
    </div>
</div>

/* 三列中间自适应布局 */
.g-bd5{margin:0 0 10px;}
.g-sd51,.g-sd52{position:relative;float:left;width:230px;margin:0 -230px 0 0;}
.g-sd52{float:right;width:190px;margin:0 0 0 -190px;}
.g-mn5{float:left;width:100%;}
.g-mn5c{margin:0 200px 0 240px;}

左侧定宽

中间自适应

右侧定宽

转载于:https://www.cnblogs.com/LoveOrHate/p/4451671.html