方法1:左边设置绝对定位,右边设置左外边距,大小和左边的宽度相等

//CSS部分:
.contain{
position :relative;
height: 300px;
} .left{
position: absolute;
left:;
top:; width: 200px;
height: 300px;
background: red;
}
.right{
/*使用左外边距*/
margin-left: 200px;
height: 300px;
background: blue;
} //html部分:
<div class="contain">
<div class="left">左边定宽</div>
<div class="right">右边自适应</div>
</div>
方法2:左边设置左浮动,右边隐藏溢出的内容
.contain{
position :relative;
height: 300px;
}
.left{
float: left;
width: 300px;
height: 300px;
background:red;
}
.right{
overflow: hidden;
background: blue;
height: 300px;
} <div class="contain">
<div class="left">左边定宽</div>
<div class="right">右边自适应</div>
</div>
方法3:弹性布局
.contain{
display: flex;
}
.left{
width: 200px;
height: 200px;
background: red;
}
.right{
flex:;
height: 200px;
background:blue;
}

方法4:左右都设置浮动,width:calc()
.contain {
position: absolute;
width: 100%;
height: 100%;
}
.left {
float: left;
width: 200px;
height: 100%;
background-color: #72e4a0;
}
.right {
float: left;
width: calc(100% - 200px);
height: 100%;
background-color: #9dc3e6;
}

最终结果:

CSS两列布局的更多相关文章

  1. css两列布局,一边固定宽度,另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  2. CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  4. CSS两列布局的N种实现

    一.什么是两列布局 两列布局分为两种,一种是左侧定宽.右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间).在CSS面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能, ...

  5. CSS两列布局的多种方式

    两列布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了.这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需.这里总 ...

  6. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  7. CSS 两列布局 之 左侧适应,右侧固定 3种方式

    第一种:左侧用margin-right,右侧float:right CSS代码: html, body,ul,li #wrapper { width: 100%; height: 100%; padd ...

  8. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...

  9. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

随机推荐

  1. jmeter cookie管理器

    jmeter cookie管理器 不能用正则表达式获取登录接口生成的cookie 因为cookies并不是在登录的响应结果中生成的,而是在response header中携带的,所以不能用正则表达式提 ...

  2. 关于js.map以及css.map

    什么是source map文件. source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下. 比如压缩后原变量是m ...

  3. Android NFC M1卡读写&芯片卡读写(CPU卡读写)(RFID读写)

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/sgn5200/article/detai ...

  4. WdatePicker 时间插件

    1.下载地址:链接:https://pan.baidu.com/s/1ggusfZX 密码:gu22 常用法: <input type="text" class=" ...

  5. @MatrixVariable的使用

    @MatrixVariable的使用 博客分类: J2EE   在Spring3.2 后,一个@MatrixVariable出现了,这个注解的出现拓展了URL请求地址的功能. Matrix Varia ...

  6. ajax提交json数据到后端C#解析

    本文链接:https://blog.csdn.net/qq_22103321/article/details/78015920 前端提交json数据 $.ajax({ type: "post ...

  7. IDEA 2018 搭建 Spring MVC helloworld

    转自https://segmentfault.com/a/1190000017248622 网上看了不少idea搭建SpringMVC Helloworld的例子,但是一个个试下来都没有成功.我把他们 ...

  8. 【视频版】PDF合并器破解视频教程

    无聊顺手录了一下,需要的拿去. 下载地址: 链接:https://pan.baidu.com/s/1TtK1JNzNw0BIl0eRPS_nlw   提取码复制可见:pqgi   

  9. 【电子电路技术】PoE供电技术的优缺点

    转自http://www.mamicode.com/info-detail-1059108.html 1PoE供电稳定吗? 随着近几年网络监控的迅猛发展,技术门槛也是越来越高,厂商提供的技术支持也越来 ...

  10. VMware vSphere6.0 服务器虚拟化部署安装图解(最全,最详细)-搭建的所有步骤

    VMware vSphere6.0 服务器虚拟化部署安装图解 一 .VMware vSphere部署的前期规划要点 1.vSphere的优点 (略) 2如何利用现在的设备架构虚拟化环境 在虚拟化过程中 ...