css两栏布局

最新推荐文章于 2024-12-30 22:22:49 发布

GXing007

最新推荐文章于 2024-12-30 22:22:49 发布

阅读量277

点赞数

CC 4.0 BY-SA版权

分类专栏： html/css

本文链接：https://blog.youkuaiyun.com/GXing007/article/details/79496342

html/css 专栏收录该内容

3 篇文章

订阅专栏

左边定宽，右边自适应

方法一：左边使用float：left，右边使用margin-left;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css两栏布局</title>
    <style>
        body{ margin: 0; padding: 0;}
        .left{width: 100px; background: #fff473; height: 100px; float: left;}
        .right{ background: #5900ce; height: 100px; margin-left: 100px;}
    </style>
</head>
<body>
    <div class="left">22222222</div>
    <div class="right">111111111111</div>
</body>
</html>

方法二：左面float，右面没有变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css两栏布局</title>
    <style>
        body{ margin: 0; padding: 0;}
        .left{width: 100px; background: #fff473; height: 100px; float: left;}
        .right{ background: #5900ce; height: 100px; }
    </style>
</head>
<body>
    <div class="left">22222222</div>
    <div class="right">111111111111</div>
</body>
</html>

div的默认宽度是width：auto，自动调整宽度

在不带float的情况下，div的宽度会自动调整至最大化，而在带float的情况下则自动调整到最小化。