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

<!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. 使用类加载器加载配置文件/getClassLoader().getResourceAsStream()

    加载配置文件的两种方式; 1. 2. 两者相比,第一种方式更为方便,因为文件目录发生改变就会找不到.

  2. BI失败的原因

    最最重要的, 要有个清晰的目标和范围. 有些客户, 完全脑袋一热开始上BI, 连根本上要BI来解决什么问题都不知道.作为企业的CIO, 首先要知道上BI项目是不是符合企业的战略目标, 是不是能给企业带 ...

  3. 图形查询属性（IdentifyTask实现查询）//查询本地服务

    主页代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  4. Android-MediaRecorder录像机(视频)

    在上一篇博客,Android-MediaRecorder录制音频,中讲解了使用Android API MediaRecorder 刻录音频,这篇博客主要是介绍 使用MediaRecorder刻录(视频 ...

  5. 前端与HTTP

    本文整理在,我的github 上.欢迎Star. 各版本的http 发展 在HTTP建立之初,主要是为了传输超文本标记语言(HTML)文档.随着时代的发展,也进行了若干次演进.下图是各个版本发布的时间 ...

  6. 通过一个例子感受C# 6.0新特性

    微软在Visual Studio 2015中更新C#语言到6.0,添加了很多很好的特性,以使C#语言继续跻身于最优秀语言之行列.下面通过一个例子快速感受一下C# 6.0的新特性,以下程序在VS2015 ...

  7. PDF文档转换为图片、图片转成PDF 及PDF合并

    简介 功能:PDF文档按每页转换成一张图片,一张图片转换成一张PDF 并将多张PDF合成一个多页的PDF文档. 经历:在各个网站上搜索始终出现各种问题,尤其是遇到引用的版本问题尤其头疼,不是不能适用当 ...

  8. Thread类

    Thread类相对于线程池中的线程,使用者有更多的控制权.该类允许创建前台线程,设置线程优先级等.Thread类的构造函数重载为接受ThreadStart和ParameterizedThreadSta ...

  9. ASP.NET MVC学习笔记（二）登陆验证

    书上的验证时在配置文件中直接声明用户名和密码,想改成从数据验证账号和密码,搞了一下午都没高出来,不断的调试,发现 var table = userInfo.Tables.FirstOrDefault( ...

  10. netcore中使用bower还原出错的解决方法

    近期BitAdminCore框架在创建时,还原bower包出现502错 打开地址,发现原为是因为bower服务调整导致的. 果断处理: 1.通过管理员模式,启动命令行 2.进入npm所在目录 3.执行 ...