神奇的事

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

代码如下：

  1. <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>神奇的事</title>
        <style>
  1. 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;
            }
             /*<!----------------------------------------->*/
  2.  
  3.         /*<!--------------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;
            }
            /*<!----------------------------------------->*/
  4.  
  5.         /*<!--------------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;
            }
  6.  
  7.         /*<!----------------------------------------->*/
  8.  
  9.         /*<!--------------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;
            }
  10.  
  11.         /*<!----------------------------------------->*/
  12.  
  13.         /*<!--------------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;
            }
  14.  
  15.         /*<!----------------------------------------->*/
            /*<!--------------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;
            }
  16.  
  17.         /*<!----------------------------------------->*/
  18.  
  19.         /*<!--------------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;
            }
  20.  
  21.         /*<!----------------------------------------->*/
        </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>
  22.  
  23.         <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>
  24.  
  25.         <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>
  26.  
  27. </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. 软件模拟spi的注意事项

    前几天遇到了软件模拟spi的时候,读和写不一致的现象,后来仔细研究了一下,其实是时序性问题不对. spi的有四种时序,硬件实现的时候,很简单,初始化后直接调用api即可.但是软件模拟就比较麻烦. 举例 ...

  2. .netcore 3.1高性能微服务架构：封装调用外部服务的接口方法--HttpClient客户端思路分析

    众所周知,微服务架构是由一众微服务组成,项目中调用其他微服务接口更是常见的操作.为了便于调用外部接口,我们的常用思路一般都是封装一个外部接口的客户端,使用时候直接调用相应的方法.webservice或 ...

  3. Jmeter连接SqlServer数据库并操作

    jmeter支撑多种数据库,且均需要下载对应的驱动包,如下以SqlServer为例作为讲解,其他数据库类似. 1.下载jdbc驱动(注意下载对应版本),并放在jmeter的lib目录下,重启jmete ...

  4. TensorFlow安装-(Ubuntu18.04.3 & Anaconda3)

    1.背景 使用ubuntu18.04.3安装Anaconda3之后使用网上教程安装tensorflow失败,踩了多个坑,特此总结经验 附官方教程:https://tensorflow.google.c ...

  5. 【DTOJ】2704：数字互换

    DTOJ 2704:数字互换  解题报告 2017.11.11 第一版 ——由翱翔的逗比w原创 题目信息: 题目描述 输入两个数作为交换数,输出已交换顺序后的两个值. 输入 两个整数,空格隔开 输出 ...

  6. JPA 常用注解

    @Entity(name=”EntityName”):必须,name为可选,对应数据库中一的个表 @Table(name=””,catalog=””,schema=””):可选 通常和@Entity配 ...

  7. 开发分支管理模型之阿里AoneFlow

    说到分支管理模型,令人最为熟悉的莫过于TrunkBased 和 GitFlow. TrunkBased 模型是持续集成思想所崇尚的工作方式,它由单个master分支和许多release分支组成,每个r ...

  8. Keras高层API之Metrics

    在tf.keras中,metrics其实就是起到了一个测量表的作用,即测量损失或者模型精度的变化.metrics的使用分为以下四步: step1:Build a meter acc_meter = m ...

  9. Java文件与类动手动脑

    动手动脑1: 使用Files. walkFileTree()找出指定文件夹下所有大于指定大小(比如1M)的文件. package classJava; import java.io.IOExcepti ...

  10. LeNet, AlexNet, VGGNet, GoogleNet, ResNet的网络结构

    1. LeNet 2. AlexNet 3. 参考文献: 1.  经典卷积神经网络结构——LeNet-5.AlexNet.VGG-16 2. 初探Alexnet网络结构 3.