CSS布局之负margin-left的使用

CSS布局之负margin-left的使用

1853发表于2015-10-30

做前端的同学都应该都用过margin为负值的,今天就来说说负margin-left的使用的使用,最终页面的效果如下:

html+css源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        
        #content { width:950px; overflow:hidden; margin-bottom:10px; }
        #main { float:left; width:550px; background:#dedede; margin-left:200px; _display:inline; }
        #left { float:left; width:190px; background:#F90; margin-left:-750px; }
        #right { float:right; width:190px; background:#3CC; }
    </style>

</head>
<body>

<div id="content">
    <div id="main">
        <p>Hello,CSS & HTML.</p>
        <p>I love this game.</p>
    </div>
    <div id="left">
        <p>I'm the sub colum.</p>
    </div>
    <div id="right">
        <p>I'm the extra colum.</p>
    </div>
</div>
</body>
</html>

小编蓝狐