css左右布局，左侧固定，右侧自适应

本文转载自查看原文 2019-04-28 16:59 595 Web

实现布局的几种方法，见代码：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .content{
        width: 100%;
        height: 50px;
        border: solid 1px;
        margin-top: 10px;

    }
    .content div:first-child{
        background: red;
        height: 50px;
        width:50px;
    }
    .content div:last-child{
        background: green;
        height: 50px;
    }
    </style>
</head>
<body>
    <!--浮动-->
    <div class="content" >
        <div style="float: left;"></div>
        <div style="margin-left: 50px;"></div>
    </div>
    <!--绝对定位-->
    <div class="content" >
        <div style="position: absolute"></div>
        <div style="overflow:hidden;"></div>
    </div>
    <!--flex-->
    <div class="content" style="display:flex;">
        <div ></div>
        <div style="flex-grow: 1"></div>
    </div>
    <!--表格-->
    <table class="content" style="border-collapse: collapse;">
        <tr>
            <td style="width:50px;background:red;"></td>
            <td style="background:green;"></td>
        </tr>
    </div>
</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 CSS自适应布局(左右固定中间自适应或者右侧固定左侧自适应) CSS实现左侧固定，右侧自适应布局网页布局-左侧固定，右侧自适应 CSS布局 -- 左侧定宽，右侧自适应 css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条） flex左侧固定宽度，右侧自适应布局 css实现右侧固定宽度，左侧宽度自适应 css经典布局之左侧固定大小右侧自动适应 css 左侧跟随右侧高度自适应两列布局——左侧宽度固定，右侧宽度自适应的两种方法