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

<!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. kbmMWtable for XE5 接近尾声

    为了支持多平台开发的delphi XE5,kbmmwtable 做了非常大的改动. 目前已经可以在ios 和android 上建立和查询数据表了,但是众说周知,在ios 和android 上 使用Li ...

  2. ADO接口之_RecordsetPtr

    转自:http://hi.baidu.com/%CE%D2%B6%CF%C1%CB%CB%BC%C4%EE/blog/item/e057c526c6af6c29c995596e.html _Recor ...

  3. 如何把asp.net上的服务在iis调试

    1,在iis上部署一个应用,路径指向工程目录 2,在vs2012(其他版本没试过,10都很久没用不记得了)中打开网站,选择本地iis 3,在你想调试的地方设置断点,F5,搞定!

  4. Python学习-5.Python的变量与数据类型及字符串的分割与连接

    在Python中,变量类型是固定的,一旦声明就不能修改其类型(在Python里感觉不应该用声明,而应该用使用) 正确: var = 1 print(var) var = 2 print(var) 依次 ...

  5. Lucene教程(四) 索引的更新和删除

    这篇文章是基于上一篇文章来写的,使用的是IndexUtil类,下面的例子不在贴出整个类的内容,只贴出具体的方法内容. 3.5版本: 先写了一个check()方法来查看索引文件的变化:   /**   ...

  6. Lucene的数值索引以及范围查询

    对文本搜索引擎的倒排索引(数据结构和算法).评分系统.分词系统都清楚掌握之后,本人对数值索引和搜索一直有很大的兴趣,最近对Lucene对数值索引和范围搜索做了些学习,并将主要内容整理如下: 1. Lu ...

  7. Web 协议　HTTP1.0 HTTP1.1 SPDY HTTP2.0

    Web 协议 HTTP1.0 HTTP1.1 SPDY HTTP2.0 HTTP1.0 VS HTTP1.1 长连接HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接,而H ...

  8. ASP.NET MVC验证DateTime的问题

    今天碰到一个Bug,在IE8中,日期验证失效,输入正确的日期格式也会验证失败,提示:xxx必须是日期格式(the field xxx must be a date) 最终找到问题所在:jquery.v ...

  9. you need to be root to perform this command

    在linux 终端执行某条命令时 提示一下错误 you need to be root to perform this command 是提示要获取root权限 输入su 回车输入密码 即可解决 参考 ...

  10. EF查询记录

    public void TestMethod1() { , Ids = , Ids = "4,5,6" } }; , , , , , , , }; var query = quer ...