css常见的各种布局上（两列布局）
常见的布局上（两列布局）
1.常见的两列布局
1.1左边固定，右边自适应，左边宽度已知，右边默认占满整行，使用left 左浮动，右边不浮动，设置margin-left:左侧宽度
<style>
.box{
overflow: hidden;
height: 500px;
background-color: bisque;
}
.box .box-left {
margin-left: 10px;
width: 200px;
min-height: 100%;
float: left;
background-color: pink;
}
.box .box-right {
margin-left: 220px;
margin-right: 10px;
height: 100%;
background-color: green;
}
header,footer {
height: 75px;
background-color: aqua;
}
</style>
<div class="box">
<div class="box-left">
11
</div>
<div class="box-right">
1shishsihsishsihi是不变的沙发电视柜很多水果和客户的感慨的沙发电视柜很多水果和客户的感慨大苏打撒郭德纲你只是 第三个大概了解斯大林经过拉丝几个垃圾
</div>
</div>
1.2右侧固定，宽度已知，左侧自适应，记住固定的区域一定要放自适应区域的右边，
.box{
height: 500px;
background-color: bisque;
position: relative;
}
.box .box-right {
float: right;
width: 200px;
min-height: 100%;
margin-right: 10px;
background-color: pink;
}
.box .box-left {
margin-left: 10px;
margin-right: 220px;
height: 100%;
background-color: green;
}
header,footer {
height: 75px;
background-color: aqua;
}
<div class="box">
<div class="box-right">
11
</div>
<div class="box-left">
1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨大苏打撒郭德纲你只是
第三个大概了解斯大林经过拉丝几个垃圾
</div>
</div>
单列固定都是比较简单的还有嵌套一层div方式，还有弹性布局方式，还有grid布局，都能实现单侧固定
1.3 嵌套一层div ,左侧固定，右侧自适应布局，使用双浮动，右侧自适应先写入，左侧使用margin-left:-100%
不嵌套一层div，右侧直接使用margin-left:左侧宽度也是可以的(这个代码就不写了，和第一个差不多)
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
overflow: hidden;
}
.box .box-right {
float: left;
margin-left: -100%;
width: 200px;
min-height: 100%;
background-color: pink;
}
.box .box-left {
float: left;
width: 100%;
height: 100%;
background-color: green;
}
.box .box-left .son {
margin-left: 210px;
}
header,footer {
height: 75px;
background-color: aqua;
}
</style> <body>
<header> </header>
<div class="box">
<div class="box-left">
<div class="son">
1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨大苏打撒郭德纲你只是
第三个大概了解斯大林经过拉丝几个垃圾
</div>
</div>
<div class="box-right">
11
</div>
</div>
<footer> </footer>
</body>
1.4 t弹性布局
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
display: flex;
}
.box .box-left {
margin-left: 10px;
flex: 0 0 200px; /* 参数分别是 放大，缩小 初始大小 */
background-color: pink;
}
.box .box-right {
margin-left: 10px;
margin-right: 10px;
height: 100%;
background-color: green;
}
header,footer {
height: 75px;
background-color: aqua;
}
</style>
<body>
<header> </header>
<div class="box">
<div class="box-left">
11
</div>
<div class="box-right">
1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
大苏打撒郭德纲你只是 第三个大概了解斯大林经过拉丝几个垃圾
</div>
</div>
<footer> </footer>
</body>
1.5 grid布局,grid相对于flex的话属于二维布局，可以定义行数，定义列数，定义行高列高，宽度也可以自适应，设置父容器的display:grid。grid 有很大的兼容性问题。慎用
使用grid 相当于设置行数为1，列数为2的grid布局，使用grid可以很容易实现九宫格布局
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
display: grid;
padding: 0 10px;
grid-template-rows: 1fr;
grid-template-columns: 200px auto;
grid-gap: 10px;
}
.box .box-left {
background-color: pink;
}
.box .box-right {
background-color: green;
}
header,footer {
height: 75px;
background-color: aqua;
}
</style>
<body>
<header> </header>
<div class="box">
<div class="box-left">
11
</div>
<div class="box-right">
1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
大苏打撒郭德纲你只是 第三个大概了解斯大林经过拉丝几个垃圾
</div>
</div>
<footer> </footer>
</body>
使用grid实现9宫格布局
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
display: grid;
padding: 0 10px;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.box .box-left {
background-color: pink;
}
.box .box-right {
background-color: green;
}
header,footer {
height: 75px;
background-color: aqua;
}
</style>
<body>
<header> </header>
<div class="box">
<div class="box-left">
11
</div>
<div class="box-right">
1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
大苏打撒郭德纲你只是 第三个大概了解斯大林经过拉丝几个垃圾
</div>
<div class="box-left">
11
</div>
<div class="box-right">
1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
大苏打撒郭德纲你只是 第三个大概了解斯大林经过拉丝几个垃圾
</div>
<div class="box-left">
11
</div>
<div class="box-right">
1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
大苏打撒郭德纲你只是 第三个大概了解斯大林经过拉丝几个垃圾
</div>
<div class="box-left">
11
</div>
<div class="box-right">
1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
大苏打撒郭德纲你只是 第三个大概了解斯大林经过拉丝几个垃圾
</div>
<div class="box-left">
11
</div>
</div>
<footer> </footer>
</body>
1.6 使用定位实现左侧固定右侧自适应布局，
1.6.1使用相对定位，该布局，左侧固定div 的高度已知，
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
}
.box .box-left {
margin-left: 10px;
width: 200px;
height: 400px;
background-color: pink;
}
.box .box-right {
position: relative;
top: -100%;
margin-left: 220px;
height: 100%;
background-color: green;
margin-right: 10px;
}
header,footer {
height: 75px;
background-color: aqua;
}
</style>
<body>
<header> </header>
<div class="box">
<div class="box-left">
11
</div>
<div class="box-right">
1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
大苏打撒郭德纲你只是 第三个大概了解斯大林经过拉丝几个垃圾
</div>
</div>
<footer> </footer>
</body>
1.6.2 使用相对定位实现左侧固定，右侧自适应，div高度未知，将自适应的模块放前面，固定宽度div设置top:-100%
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
}
.box .box-left {
position: relative;
top: -100%;
margin-left: 10px;
width: 200px;
height: 400px;
background-color: pink;
}
.box .box-right {
margin-left: 220px;
height: 100%;
background-color: green;
margin-right: 10px;
}
header,footer {
height: 75px;
background-color: aqua;
}
</style>
<body>
<header> </header>
<div class="box">
<div class="box-right">
1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
大苏打撒郭德纲你只是 第三个大概了解斯大林经过拉丝几个垃圾
</div>
<div class="box-left">
11
</div>
</div>
<footer> </footer>
</body>
1.6.3 使用绝对定位，两个模块都使用绝对定位，可以不使用浮动
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
}
.box .box-left {
position: absolute;
margin-left: 10px;
width: 200px;
height: 400px;
background-color: pink;
}
.box .box-right {
position: absolute;
margin-left: 220px;
height: 100%;
background-color: green;
margin-right: 10px;
}
header,footer {
height: 75px;
background-color: aqua;
}
</style>
<body>
<header> </header>
<div class="box">
<div class="box-right">
1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
大苏打撒郭德纲你只是 第三个大概了解斯大林经过拉丝几个垃圾
</div>
<div class="box-left">
11
</div>
</div>
<footer> </footer>
</body>
1.6.4 左侧先放入固定模块，设置定位为绝对定位，右侧模块无论使用什么定位，只要margin-left：左侧宽度，
都能实现这个布局
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
}
.box .box-left {
position: absolute;
margin-left: 10px;
width: 200px;
height: 400px;
background-color: pink;
}
.box .box-right {
margin-left: 220px;
height: 100%;
background-color: green;
margin-right: 10px;
}
header,footer {
height: 75px;
background-color: aqua;
}
</style>
<body>
<header> </header>
<div class="box">
<div class="box-left">
11
</div>
<div class="box-right">
1shishsihsishsihi是不变的沙发电视柜很多水果和客1111111111111111111111户的感慨的沙发电视柜很多水果和客户的感慨
大苏打撒郭德纲你只是 第三个大概了解斯大林经过拉丝几个垃圾
</div>
</div>
<footer> </footer>
</body>
上面所以布局的实现图
总结，左侧固定右侧自适应布局
1、不使用定位，左侧固定，浮动，右侧，设置margin-left：左侧宽度
2、不适用定位，左侧固定，浮动，右侧也浮动，，右侧模块一定要写在左侧模块之前，左侧使用margin-left:-100%
2.1右侧使用margin:左侧宽度，
2.2左侧设置宽度100%,嵌套一层div,设置margin:左侧宽度（这种方式有点多余，在两列布局上）
3、使用定位，父元素设置display:relative(为啥不使用absolute，子元素要是设置也是absolute，
那么都不知道跑什么地方去了)
3.1 左元素不设置定位，右侧元素设置相对定位display:relative;则，有点设置top：左侧高度，margin：左侧宽度
3.2 左侧宽度不定，则将左侧和右侧元素都设置为相对定位，右侧元素先放入页面，左侧设置top:-100%.右侧设置
margin-left：左侧宽度（3.1的左侧高度要已知，而这个左侧高度可以不已知）
3.2 左侧元素为绝对定义，则右侧元素直接设置margin-left:左侧宽度，（left，margin-left,对于自适应的
宽度，margin会使宽度变窄，而left 是不会的，如果要是用left:左侧宽度，那么一定要设置margin-right:左侧宽度）
4、使用flex布局，单列布局，设置父元素display:flex;左侧元素的flex为;:0 0 width;右侧元素不用设置
5、使用grid布局，grid布局是二维布局，设置为1行，1列，第一列宽度为定位宽度，第二列宽度为auto,子元素不用设置
上面基本上覆盖了所以的左侧固定，右侧自适吟的布局，第一种最简单， 4 5 有一定兼容性问题，flex常用语移动端。
如果您还有更好的方法，请给我留言。
css常见的各种布局上（两列布局）的更多相关文章
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
- 慕课笔记利用css进行布局【两列布局】
<html> <head> <title>两列布局</title> <style type="text/css"> bo ...
- css布局之两列布局
我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...
- bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
- css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局
一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...
- css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
随机推荐
- FineReport启动后访问404
近期将FineReport以嵌入式方式部署在Tomcat8上,启动服务后,点击导出下载出现HTTP ERROR 404情况: 百思不得其解啊,纠结了好几天: 后查看原部署Tomcat6服务器的cata ...
- 设计模式之模板方法(Template Method)
在整理模板方法之前,先来说点废话吧.除了记录学习总结,也来记录一下生活吧. 我们公司的老板在北京,老板也会因为项目来公司,不过不是天天来.公司有个同事,只要老板不在就天天迟到,而且一天比一天晚,经常来 ...
- 使用XHProf分析PHP性能瓶颈(二)
上一篇文章里,我们介绍了如何基于xhprof扩展来分析PHP性能,并记录到日志里,最后使用xhprof扩展自带的UI在web里展示出来.本篇文章将讲述2个知识点: 使用xhgui代替xhprof的默认 ...
- java并发之非阻塞算法介绍
在并发上下文中,非阻塞算法是一种允许线程在阻塞其他线程的情况下访问共享状态的算法.在绝大多数项目中,在算法中如果一个线程的挂起没有导致其它的线程挂起,我们就说这个算法是非阻塞的. 为了更好的理解阻塞算 ...
- JS/jquery实现鼠标控制页面元素显隐
最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...
- ETCD相关介绍--整体概念及原理方面
etcd作为一个受到ZooKeeper与doozer启发而催生的项目,除了拥有与之类似的功能外,更专注于以下四点. 简单:基于HTTP+JSON的API让你用curl就可以轻松使用. 安全:可选SSL ...
- 你不知道的JavaScript--Item7 函数和（命名）函数表达式
1.函数声明与函数表达式 在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier ...
- JavaScript的垃圾回收机制
JavaScript语言是一门优秀的脚本语言.其中包含脚本语言的灵活性外还拥有许多高级语言的特性.例如充许构建和实例化一个对象,垃圾回收机制(GC:Garbage Collecation).通常我们使 ...
- Reactor和Proactor模式
在高性能的I/O设计中,有两个比较著名的模式Reactor和Proactor模式,其中Reactor模式用于同步I/O,而Proactor运用于异步I/O操作.同步和异步 同步和异步是针对应用程序和内 ...
- bzoj4035 [HAOI2015]数组游戏
这题显然把每个白格子看成一个子游戏 一个白格子$x$的$sg$值是$mex{[0,sg[2x],sg[2x] XOR sg[3x].....]}$ 打表发现一个数的$sg$值只和$n/x$有关,然后分 ...