负margin实现div的左右排版

最新推荐文章于 2023-10-11 10:32:33 发布

转载最新推荐文章于 2023-10-11 10:32:33 发布 · 1k 阅读

asp.net 专栏收录该内容

63 篇文章

订阅专栏

本文详细介绍了如何通过调整div元素的负margin来实现网页的多栏自适应布局，包括左右固定与自适应布局、左右各占一定百分比布局以及左中右三栏布局的方法。此外，还探讨了实现框架页效果和保持左右高度一致的技巧。

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

使用负margin可以使当前的div左边能容纳下面的div浮动上来，因此把右边的div摆在前面，左边的摆后面，右边的使用负margin就能让左边的浮上来，这样就遮住了右边的左半部分，只要右边再内部使用一个div，外边距为左边的宽度就实现了左右的排版。

1、左边固定，右边自适应

    <div>
        <div style="float: right; margin: 0 0 0 -200px; width: 100%;">
            <div style="margin: 0 0 0 200px; background: #e4e4e4;">
                这是右边部分
            </div>
        </div>
        <div style="float: left; width: 200px; background: #669999">
            这是左边部分
        </div>
    </div>

2、右边固定，左边自适应，跟上一个最大的不同点就是，左右两个div容器的代码的前后位置换了，原因就是"float:rihgt"一定要在"float:left"前面。


    <div>
        <div style="float: right; width: 200px; background: #669999">
            这是右边部分
        </div>
        <div style="float: left; margin: 0 -200px 0 0; width: 100%;">
            <div style="margin: 0 200px 0 0; background: #e4e4e4;">
                这是左边部分
            </div>
        </div>
    </div>

3、左右各占一定百分比，这就简单了，把上面任意一种将200px改成比例值20%就实现了。

<div>
        <div style="float: right; margin: 0 0 0 -20%; width: 100%;">
            <div style="margin: 0 0 0 20%; background: #e4e4e4;">
                这是右边部分
            </div>
        </div>
        <div style="float: left; width: 20%; background: #669999">
            这是左边部分
        </div>
    </div>

4、再加一栏，实现左中右三栏布局。这只要再加一栏，float为right的多空一些位置就行了。这里以按比例为例

<div>
        <div style="float: right; margin: 0 0 0 -40%; width: 100%;">
            <div style="margin: 0 0 0 40%; background: #e4e4e4;">
                这是右边部分
            </div>
        </div>
        <div style="float: left; width: 20%; background: #669999">
            这是左边部分
        </div>
        <div style="float: left; width: 20%; background: #663333">
            这是中间部分
        </div>
    </div>

请注意：以上代码中都没有设置高度，实际上左右高度是不一致的，如果要左右高度一致，请不要设置左右的高度，由内容自动撑开，然后在页面合适位置用js实现：

window.onload = window.onresize = function ()
{
    var left = document.getElementById("doc-left");
    var right = document.getElementById("doc-right");

    var maxHeight = Math.max(left.clientHeight, right.clientHeight) + "px";
    left.style.height = right.style.height = maxHeight;
}

5、实现框架页的效果（左右可分别出现滚动条，页面无滚动条）：只要左右div各加position: absolute; overflow: scroll; height: 100%;右边再加left: 200px;即实现了，这里用了绝对定位，因此float属性可以干掉了


    <div>
        <div style="margin: 0 0 0 -200px; width: 100%; position: absolute; overflow: scroll;
            height: 100%; left: 200px;">
            <div style="margin: 0 0 0 200px; background: #e4e4e4;">
                这里是右边部分
            </div>
        </div>
        <div style="width: 200px; background: #669999; position: absolute; overflow: scroll;
            height: 100%;">
            这是左边部分
        </div>
    </div>