两列布局:左边固定,右边自适应

第一种方法:左边的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之页面两列布局的更多相关文章

  1. css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  2. div+css经典三行两列布局

    写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...

  3. css之页面三列布局

    左右两边宽度固定,中间自适应 第一种方法:左右两边绝对定位 html代码 <div class="left"></div> <div class=&q ...

  4. css之页面三列布局之左右两边宽度固定,中间自适应

    左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...

  5. css之页面三列布局之左右上下高度固定,中间自适应

    第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...

  6. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局

    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...

  7. 两列布局,读《css那些事儿》

    两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> ...

  8. CSS读书笔记(1)---选择器和两列布局

    (1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...

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

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

随机推荐

  1. Ubuntu 16.04 安装ftp服务器传输文件

    最近在搞深度学习,老师比较宝贝他的服务器,要求我以后负责管理服务器.往后所有要使用服务器的人都必须向我申请账号,然后只允许客户端访问,使用文件传输软件传输文件.像我这样一个linux菜逼,这种要求不是 ...

  2. Jquery:hide一个元素,需要注意的问题(offset)

    $(".load_more").css('display','none'); 或 $(that.more).find("strong").hide(); 需要注 ...

  3. 错误: 未能从 xmlsocket://127.0.0.1:5840 中加载策略文件

    看看你是否使用了MonsterDebugger,如果是这样的话, 因为那个 MonsterDebugger 没有启动 删掉MonsterDebugger的代码吧

  4. varnish 4.0.3 域名访问的小问题

    1,若端口不是80 端口则匹配的时候必须加端口 if (req.http.host ~ "(?i)^var.test.aa:6081$") {set req.http.host = ...

  5. 工具04_SQL Trace/DBMS_SYSTEM

    2014-06-25 Created By BaoXinjian

  6. string相关总结

    一 <string> 1 string类常见成员函数 (1)属性相关 s.empty()   s为空时返回true,否则返回false s.size()      返回s中字符的个数,不包 ...

  7. 一键配置openvpn

    页面:https://github.com/Nyr/openvpn-install openvpn-install OpenVPN road warrior installer for Debian, ...

  8. C#中的继承

    按照我个人的理解,继承和实现接口不是一个概念,结构和类型都可以实现接口,枚举不能. 话说,结构可以继承吗? 先梳理一下C#中的继承关系,如下图: class => [BaseClass => ...

  9. List subList(startIndex, endIndex);

    1. subList(startIndex, endIndex);//startIndex开始,到endIndex结束,不包含endIndex! 2. 集合排序可以实现 java.util.Compa ...

  10. 批量Clip

    没有建立对应dataset,直接生成featureclass,主要是工作中没几个dataset. # -*- coding: utf-8 -*-__author__ = 'tanshuai' impo ...