井井客

搜索

整理CSS实现右边宽度固定左边自适应

之前的面试题整理,关于CSS实现右边宽度固定左边自适应的效果。

1、使用float布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        html, body, div {
            padding: 0;
            margin: 0;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #f00;
        }
        .right {
            margin-left: 200px;
            height: 300px;
            background-color: #ff0;
        }
    </style>
</head>
<body>
    <div class="left">左边</div>
    <div class="right">右边</div>
</body>
</html>

2、使用position布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        html, body, div {
            padding: 0;
            margin: 0;
        }

        .left {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 300px;
            background: #f00;
        }
        .right {
            margin-left: 200px;
            height: 300px;
            background-color: #ff0;
        }
    </style>
</head>
<body>
    <div class="left">左边</div>
    <div class="right">右边</div>
</body>
</html>

可以发现float与absolute非常相似,而且两者都是脱离文档流。不同点在于:
在使用float脱离文档流时,其它盒子会无视这个元素,但盒子内的文本会为这个元素让出位置。
而在使用absolute脱离文档流时,其他盒子与盒子内文本都会无视这个元素。

3、使用overflow(BFC布局)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        html, body, div {
            padding: 0;
            margin: 0;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #f00;
        }
        .right {
            height: 300px;
            background-color: #ff0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="left">左边</div>
    <div class="right">右边</div>
</body>
</html>

这个与float也是非常相似,只是右边使用的是overflow。通过创建BFC,使盒子不会相互围绕。
目前有一个display:flow-root属性可以替代overflow:hidden。

4、使用flex布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        html, body, div {
            padding: 0;
            margin: 0;
        }
        body {
            display: flex;
        }
        .left {
            width: 200px;
            height: 300px;
            background-color: #f00;
        }
        .right {
            flex: 1;
            height: 300px;
            background-color: #ff0;
        }
    </style>
</head>
<body>
    <div class="left">左边</div>
    <div class="right">右边</div>
</body>
</html>

flex属性是flex-grow, flex-shrink 和 flex-basis的简写。

暂时就整理了这四种~

文章TAG:CSS

作者:井井客整理来源:原创
本文标题:整理CSS实现右边宽度固定左边自适应
本文链接:/c/28344.html

上一篇:CSS实现16:9比例自适应的矩形
下一篇:CSS水平居中有哪些实现方式

文章分类

相关阅读

随便看看