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

<!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>

css左右布局，左侧固定，右侧自适应的更多相关文章

  1. html布局,左侧固定右侧自适应

    前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...

  2. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  3. 七种CSS左侧固定,右侧自适应两栏布局

    一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...

  4. css布局中左侧固定右侧自适应

    float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...

  5. css中左侧固定,右侧自适应

    谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度;       2.只告 ...

  6. css布局之左侧固定右侧自适应布局

    参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...

  7. CSS左侧固定右侧自适应

    方法一: float + margin.left{ float: left; width: 100px; }.right {margin-left:100px; } /*清除浮动*/ .contain ...

  8. 一个简单的左侧固定右侧自适应demo

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  9. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  10. css左侧固定宽度右侧自适应

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

随机推荐

  1. 协程库st(state threads library)原理解析

    协程库state threads library(以下简称st)是一个基于setjmp/longjmp实现的C语言版用户线程库或协程库(user level thread). 这里有一个基本的协程例子 ...

  2. Python服务器开发 -- 网络基础-乾颐堂

    网络由下往上分为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. HTTP是高层协议,而TCP/IP是个协议集,包过许多的子协议.包括:传输层的 FTP,UDP,TCP协议等,网络层的ip ...

  3. web02

    高内聚,低耦合 写what 不写how 我们只关心他是什么,得到什么,我们并不关心怎么去得到的 ,那个细节去怎么得的, 都应该在这个层面上屏蔽掉,要关心的时候在点进去,这样就一层层的结构良好的代码 d ...

  4. Java程序设计16——Annotatio注释

    Annotation是代码里的特殊标记,这些标记可以在编译.类加载.运行时被读取,并执行相应的处理.通过使用Annotation,程序开发人员可以在不改变原有逻辑的情况下,在源文件嵌入一些补充信息.代 ...

  5. Markdown 手册

    前言(可以不看) 最开始只是想写一篇博文,准备使用markdown,感觉很流行(github.简书……很多都支持),而且渲染出来很好看,一直很想学,没有合适的机会,结果拖到了现在.比起什么python ...

  6. python 中numpy的var，std及cov

    var:表示方差, 即各项-均值的平方求和后再除以N , std:表示标准差,是var的平方根. cov:协方差 ,与var类似,但是除以(N-1)

  7. o7 文件和函数

    一:文件 1 控制文件内指针的移动 文件内指针移动,只有在t模式下的read(n),n代表的字符的个数 除此之外文件内指针的移动都是以字节为单位的 with open('a.txt',mode ='r ...

  8. Redis数据结构（三）

    Redis五种数据类型: (1)字符串 (2)字符串列表 (3)有序字符串集合 (4)哈希 (5)字符串集合 其中(4)(5)应用最多. key命名的注意: (1)不要过长,尽量不要超过1024,会降 ...

  9. Spring3.x错误----java.lang.ClassNotFoundException:org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException

    Spring3.x错误: 解决方法: 缺少aspectjweaver.jar包 下载地址: https://cn.jarfire.org/aspectjweaver.html

  10. linux每天一小步---cat命令详解

    1 命令功能 cat命令是linux系统下的一个文本输出命令,通常用于查看文件的内容. 2 命令语法 cat  [选项参数]  文件名 3 命令参数 -n  由1开始对所有输出的内容行数编号 -b   ...