css之页面两列布局
两列布局：左边固定，右边自适应
第一种方法：左边的div左浮动或者是绝对定位，右边的div加margin-left:左边div的宽度
html部分
<div class="left"></div>
<div class="right"></div>
css部分
.left {
position: absolute; /*这可以换成float:left,都可以使其脱离文档流*/
height: 100px;
width: 300px;
background-color: blue;
}
.right {
height: 200px;
margin-left: 300px;
background-color: red;
}
第二种方法：BFC(块级格式化上下文)
对于BFC的理解可以看 http://www.cnblogs.com/vitruvi/p/4303891.html
html部分和上面是一样的，下面只写css部分
.left {
float: left;
height: 200px;
width: 300px;
background-color: blue;
}
.right {
overflow: auto;
height: 200px;
background-color:red;
}
第三种方法：这种方法其实是第一种方法的延伸
<div style="float:left;width:100%">
<p style="margin-right:170px;">文字</p>
</div>
<img width='' style='float:left;margin-left:-150px;'>
这种方法与第一种方法的比较的好处就是dom的顺序和显示的顺序是一致的
第四种方法：flex
css:
.containter{
display: flex;
}
.left {
width: 200px;
background-color: blue;
}
.right {
background-color: red;
flex:1;
}
html:
<div class="containter">
<div class="left">left</div>
<div class="right">right</div>
</div>
第五种方法：table
html *{
margin:0;
padding: 0;
}
.containter{
display: table;
width: 100%;
height: 100%;
}
.left {
width: 200px;
background-color: blue;
display: table-cell;
}
.right {
background-color: red;
display: table-cell;
}
<body>
<div class="containter">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
第六种：grid
.containter{
display: grid;
width: 100%;
height: 100%;
grid-template-rows:100px;
grid-template-columns:200px auto;
}
.left {
width: 200px;
background-color: blue;
}
.right {
background-color: red;
}
两列布局：右边固定，左边自适应
第一种:float或position,其实和上面差不多
.containter{
width:400px;
height: auto;
}
.right{
width:100px;
background: red;
float: right;
}
.left{
margin-right: 100px;
background: blue;
}
html
<div class="containter">
<div class="right">right</div>
<div class="left">left</div>
</div>
第二种方法：BFC
.left {
height: 200px;
overflow: auto;
background-color: blue;
}
.right {
float: right;
background-color: red;
height: 200px;
width: 300px;
}
html同上
css之页面两列布局的更多相关文章
- css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- div+css经典三行两列布局
写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
- css之页面三列布局
左右两边宽度固定,中间自适应 第一种方法:左右两边绝对定位 html代码 <div class="left"></div> <div class=&q ...
- css之页面三列布局之左右两边宽度固定，中间自适应
左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...
- css之页面三列布局之左右上下高度固定，中间自适应
第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...
- 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局
一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...
- 两列布局，读《css那些事儿》
两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> ...
- CSS读书笔记（1）---选择器和两列布局
(1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...
- CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
随机推荐
- CSharp 相关知识点小结
1.JS获取iframe下面的内容document.getElementById('IFRAME1').contentDocument; 2.dialog 弹出层,定位:postion:'bottom ...
- 用Sublime 3作为React Native的开发IDE- 转
转-http://www.cnblogs.com/wangshuo1/p/react_native_02.html Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的 ...
- 如何提高Linux操作系统的安全性 转自https://yq.aliyun.com/articles/24251?spm=5176.100239.blogcont24250.7.CfBYE9
摘要: Linux系统不论在功能上.价格上或性能上都有很多优点,但作为开放式操作系统,它不可避免地存在一些安全隐患.关于如何解决这些隐患,为应用提供一个安全的操作平台,本文会告诉你一些最基本.最常用, ...
- linux下shell编写九九乘法表
主要语法:类似 1x2 echo $((1*2)) for 变量 in 值1 值2 值3 ;do linux命令或者语句done
- apache 使用 .htaccess 导致500错误
今天在win主机上配置了一个apache+mysql+php 的环境,一切看似正常了.结果将程序转移过来,打开网站的时候,出现了500错误.于是乎查原因: 首先,怀疑的是连接mysql出错了,找出配置 ...
- 怎么查看bios版本
怎么查看bios版本呢?无需去注册表查看,无需去BIOS中查看,只需要一条简单的命令即可,下面就来一起看一看怎么查看bios版本: Win键+R打开“运行”,然后再“运行”中输入cmd进而打开“cmd ...
- JDBC连接实例
package com.javaee.corejava; import java.sql.Connection; import java.sql.DriverManager; import java. ...
- ElasticSearch优化配置
################################################################### /etc/elasticsearch/elasticsearch ...
- c#操作Excel
Excel是微软公司办公自动化套件中的一个软件,他主要是用来处理电子表格.Excel以其功能强大,界面友好等受到了许多用户的欢迎.在设计应用系统时,对于不同的用户,他们对于打印的需求是不一样的,如果要 ...
- hive 基本语法
本来想讲自己用到的写出来了,结果发现一个比较全面的文章已经介绍过了,那我就不在重新发明轮子了,我也跟着学习一下. 转自:http://jeffxie.blog.51cto.com/1365360/31 ...