神奇的事

其实有的方法（float、position、margin、flex）是有border像素的差

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>神奇的事</title>
    <style>
section {
            margin: 50px 0;
        }
        h3 {
            color: red;
            text-align: center;
            /*padding: 10px;*/
            background: yellowgreen;
        }
         /*<!--------------NO.1做法(使用float)---------------->*/
         .use-float .left {
            float: left;
            width: 12%;
            border: 2px solid salmon;
        }
        .use-float .right {
            overflow: hidden;
            border: 2px solid seagreen;
        }
         /*<!----------------------------------------->*/

        /*<!--------------NO.2做法(使用table)---------------->*/
        .use-table{
            border-collapse:collapse;/*合并表格*/
            width:100%;
            height: 25px;
            border: 1px solid seagreen;
        }
        .use-table>tbody>tr>td:first-child{
            width:100px;
            height: 25px;
            border: 1px solid sandybrown;
        }
        /*<!----------------------------------------->*/

        /*<!--------------NO.3做法(使用flex)---------------->*/
        .use-flex {
            display: flex;
            height: 25px;
        }
        .use-flex .flex-left {
            flex:none;
            width:100px;
            border: 1px solid saddlebrown;
        }
        .use-flex .flex-right {
            flex: 1;
            border: 1px solid slateblue;
        }

        /*<!----------------------------------------->*/

        /*<!--------------NO.4做法(使用margin)---------------->*/
        .use-margin .tleft {
            float: left;
            width: 100px;
            height: 25px;
            border: 1px solid slategray;
        }
        .use-margin .tright {
            margin-left: 100px;
            height: 25px;
            border: 1px solid saddlebrown;
        }

        /*<!----------------------------------------->*/

        /*<!--------------NO.5做法(使用padding)---------------->*/
        .use-padding .l {
            float: left;
            width: 100px;
            height: 25px;
            border: 1px solid sandybrown;
        }
        .use-padding .r {
            padding-left: 100px;
            height: 25px;
            border: 1px solid slateblue;
        }

        /*<!----------------------------------------->*/
        /*<!--------------NO.6做法(使用padding)---------------->*/
        .use-to .le {
            float: left;
            width: 100px;
            height: 25px;
            border: 1px solid #000000;
        }
        .use-to .ri {
            display: block;
            height: 25px;
            border: 1px solid #14B9FF;
        }

        /*<!----------------------------------------->*/

        /*<!--------------NO.7做法(使用position)---------------->*/
        .use-position{
            position: relative;
        }
        .use-position .lef {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 25px;
            border: 1px solid #dca7a7;
            /*background: red;*/
        }
        .use-position .rig {
            position: absolute;
            top: 0;
            left: 100px;
            right: 0;
            height: 25px;
            border: 1px solid #64448f;
        }

        /*<!----------------------------------------->*/
    </style>
</head>
<body>
　　　　<section>
            <h3>using float</h3>
            <!--<hr style="margin: 30px 0">-->
            <div class="use-float">
                <div class="left">left</div>
                <div class="right">right</div>
            </div>
        </section>
        <section>
            <h3>using table</h3>
            <!--<hr style="margin: 30px 0">-->
            <table class="use-table">
                <tr>
                    <td>left</td>
                    <td>right</td>
                </tr>
            </table>
        </section>
        <section>
            <h3>using flex</h3>
            <!--<hr style="margin: 30px 0">-->
            <div class="use-flex">
                <div class="flex-left">left</div>
                <div class="flex-right">right</div>
            </div>
        </section>

        <section>
            <h3>using margin</h3>
            <!--<hr style="margin: 20px 0">-->
            <div class="use-margin">
                <div class="tleft">left</div>
                <div class="tright">right</div>
            </div>
        </section>
        <section>
            <h3>using padding</h3>
            <!--<hr style="margin: 20px 0">-->
            <div class="use-padding">
                <div class="l">left</div>
                <div class="r">right</div>
            </div>
        </section>
        <section>
            <h3>using disblok</h3>
            <!--<hr style="margin: 20px 0">-->
            <div class="use-to">
                <div class="le">left</div>
                <div class="ri">right</div>
            </div>
        </section>

        <section>
            <h3>using position</h3>
            <!--<hr style="margin: 30px 0">-->
            <div class="use-position">
                <div class="lef">left</div>
                <div class="rig">right</div>
            </div>
            <!--<hr style="margin: 30px 0">-->
        </section>
    </div>
</div>

</body>
</html>

*/
.use-float .left {
float: left;
width: 12%;
border: 2px solid salmon;
}
.use-float .right {
overflow: hidden;
border: 2px solid seagreen;
}
/**/

/**/
.use-table{
border-collapse:collapse;/*合并表格*/
width:100%;
height: 25px;
border: 1px solid seagreen;
}
.use-table>tbody>tr>td:first-child{
width:100px;
height: 25px;
border: 1px solid sandybrown;
}
/**/

/**/
.use-flex {
display: flex;
height: 25px;
}
.use-flex .flex-left {
flex:none;
width:100px;
border: 1px solid saddlebrown;
}
.use-flex .flex-right {
flex: 1;
border: 1px solid slateblue;
}

/**/

/**/
.use-margin .tleft {
float: left;
width: 100px;
height: 25px;
border: 1px solid slategray;
}
.use-margin .tright {
margin-left: 100px;
height: 25px;
border: 1px solid saddlebrown;
}

/**/

/**/
.use-padding .l {
float: left;
width: 100px;
height: 25px;
border: 1px solid sandybrown;
}
.use-padding .r {
padding-left: 100px;
height: 25px;
border: 1px solid slateblue;
}

/**/
/**/
.use-to .le {
float: left;
width: 100px;
height: 25px;
border: 1px solid #000000;
}
.use-to .ri {
display: block;
height: 25px;
border: 1px solid #14B9FF;
}

/**/

/**/
.use-position{
position: relative;
}
.use-position .lef {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 25px;
border: 1px solid #dca7a7;
/*background: red;*/
}
.use-position .rig {
position: absolute;
top: 0;
left: 100px;
right: 0;
height: 25px;
border: 1px solid #64448f;
}

/**/

-->

using float

left
right

using table

left right

using flex

left
right

using margin

left
right

using padding

left
right

using disblok

left
right

using position

left
right

左边div固定宽度，右边div自适应撑满剩下的宽度--实现方法汇总的更多相关文章

  1. 实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式：

    html: <div class="container"> <div class="left"> left固定宽度200px </ ...

  2. css实现左边div固定宽度，右边div自适应撑满剩下的宽度

    (1)使用float <div class="use-float"> <div></div> <div></div> & ...

  3. HTML左边盒子固定,右边盒子自适应

    html: <div class="box1"> <div class="divA">DIVA</div> <div ...

  4. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  5. 实现一个div，左边固定div宽度200px，右边div自适应

    实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...

  6. CSS 左边div固定，右边div自适应

    有时候我们会有这样的需求,如图,aside是导航或者某些链接,右边的main是显示重要的内容,左边需要定宽,右边的main能够自适应剩余的宽度: <!DOCTYPE html PUBLIC &q ...

  7. css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中（文字高度超过图片，图片跟随文字居中，反之文字跟随图片居中非table实现）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 基于Ajax+div的“左边菜单、右边内容”页面效果实现

    效果演示: ①默认页面(index.jsp): ②:点击左侧 用户管理 标签下的 用户列表 选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 : ③:同理,点击 产品管理.订 ...

  9. css怎么设置2个div同行，第一个固定宽度，第二个占满剩余的部分

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Zookeeper机制

    顾名思义 zookeeper 就是动物园管理员,他是用来管 hadoop(大象).Hive(蜜蜂).pig(小 猪)的管理员, Apache Hbase 和 Apache Solr 的分布式集群都用到 ...

  2. STT-MRAM万能存储器芯片

    传统存储器的技术局限以及不断缩小的制造尺寸所带来的巨大挑战促使科研人员开始寻找新一代存储器件,它应具有接近静态存储器的纳秒级读写速度,具有动态存储器甚至闪存级别的集成密度和类似Flash的非易失性存储 ...

  3. console 打印消息时，可以使用 %c 指定随后的文本样式； %s 可引用参数变量。

    1.console.log 使用 加%c console.log('%c Merry Christmas!!', 'color:green;background:yellow;text-shadow: ...

  4. 特殊符号unicode编码

    包括箭头类.基本形状类.货币类.数学类.音乐符号类.对错类.星星类.星座类.国际象棋类.扑克牌类.希腊字母.十字类.法律符号.标点符号,详情见以下网址:http://caibaojian.com/un ...

  5. P1197 [JSOI2008]星球大战 [删边求连通块个数]

    展开 题目描述 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治着整个星系. 某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过特殊的 ...

  6. Git 的 .gitignore 配置说明 （C#）

    1.配置语法: 以斜杠“/”开头表示目录: 以星号“*”通配多个字符: 以问号“?”通配单个字符 以方括号“[]”包含单个字符的匹配列表: 以叹号“!”表示不忽略(跟踪)匹配到的文件或目录: 此外,g ...

  7. Mysql-分库分区分表

    大数据-分表分区分库问题集:1.分表时两张表的数据都一样么?如果一样,只是降低了表的访问量,但是如果数据多了还是没有提高查询的效率答:分表是对一张表中的数据按照某种规则进行拆分到三张表中,三张表的所有 ...

  8. 剑指offer-面试题56_1-数组中只出现一次的两个数字-位运算

    /* 题目: 求数组A中只出现一次的数字,该数组中有2个数字a.b仅出现一次,其余均出现两次 */ /* 思路: 两个相同的数字异或为0. 遍历数组,得到数组中各数字异或后的结果x,结果x=a^b. ...

  9. opencv —— saturate_cast 溢出保护

    src.at<uchar>(i,j)[0] = saturate_cast<uchar>(data); if (data < 0) data = 0; else if ( ...

  10. Markdown 的效果

    这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 这是加粗的文字 这是倾斜的文字 这是斜体加粗的文字 这是加删除线的文字 这是引用的内容 这是引用的内容 这是引用的内 ...