CSS实现两列布局,一列固定宽度,一列宽度自适应方法
不管是左是右,反正就是一边宽度固定,一边宽度自适应。
博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式。
html代码:
<div id="wrap">
<div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
<div id="content" style="height:500px;background:#000;color:#fff;">自适应区</div>
</div>
实现方式方式有如下几种:
1.固定宽度区浮动,自适应区不设宽度而设置 margin
我们以右侧宽度固定,左侧宽度自适应为例:
css代码:
#sidebar {
float: right; width: 300px;
}
#content {
margin-right: 300px;
}
实现效果图:
右侧一直固定不动,左侧根据屏幕的剩余大小自适应。
但实际上这个方法是有局限性的,那就是html结构中sidebar必须在content之前才行!
但我需要sidebar在content之后!因为我的content里面才是网页的主要内容,我不想主要内容反而排在次要内容后面。
那么上面讲解的第一种方法就无效了。
就需要下面的方法来实现。
2.float与margin配合使用
首先我们调整一下html结构:
<div id="wrap">
<div id="content" style="height:500px;background:#000;color:#fff;">
<div class="contentInner">
自适应区
</div>
</div>
<div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>
css代码:
#content {
margin-left: -300px; float: left; width: 100%;
}
#content .contentInner{
margin-left:300px;
}
#sidebar {
float: right; width: 300px;
}
这样实现,contentInner的实际宽度就是屏幕宽度-300px。
3.固定宽度区使用绝对定位,自适应区设置margin
html结构:
<div id="wrap">
<div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
<div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>
css代码:
#wrap{
position:relative;
}
#content {
margin-right:300px;
}
#sidebar {
position:absolute;
width:300px;
right:;
top:;
}
4.使用display:table实现
html结构:
<div id="wrap">
<div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
<div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>
css代码:
#wrap{
display:table;
width:100%;
}
#content {
display:table-cell;
}
#sidebar {
width:300px;
display:table-cell;
}
当然最后一种方法在IE7以及以下浏览器不兼容,因为IE7设置display为table不识别。
CSS实现两列布局,一列固定宽度,一列宽度自适应方法的更多相关文章
- css两列布局,一边固定宽度,另一边自适应
<!DOCTYPE HTML><HTML> <head> <meta charset="utf-8" ...
- css实现两栏布局,左侧固定宽,右侧自适应的7中方法
一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...
- div 两列布局,左侧固定宽度px,右侧自适应宽度,满屏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
- css的两栏布局
经典的实现左边固定宽度,右边宽度自适应的几种方法 利用float和margin-left属性(margin-left的值可以稍稍大于或者等于.left的宽度) .left{ width: 30px; ...
- css实现三列布局,左右固定值,中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- css 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- CSS实现两栏布局
写在前面 两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layou ...
- 老生长谈:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
随机推荐
- 《http权威指南》读书笔记8
概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...
- Spring Cloud Config采坑记
1. Spring Cloud Config采坑记 1.1. 问题 在本地运行没问题,本地客户端服务能连上本地服务端服务,可一旦上线,发现本地连不上线上的服务 服务端添加security登录加密,客户 ...
- join和+的区别
连接字符串的时候可以用join也可以用+,但这两者有没有区别呢? 我们先来看一下用join和+连接字符串的例子 str1 = " ".join(["hello" ...
- mybatis 中的 xml 配置文件中 ‘<’、 ‘>’ 处理
mybatis 中的 xml 配置文件中 '<'. '>' 处理 1.使用转义字符将 '<'. '>' 替换掉. 描述 字符 转义字符 小于号 < < 大于号 &g ...
- Xamarin.Android 使用 SimpleAdapter 打造 ListView 万能适配器
第一步:创建 layout1.axml 来展示列表详细内容 <?xml version="1.0" encoding="utf-8"?> <L ...
- 编码之痛:操作系统迁移后redis缓存无法命中
前几天一台内网服务器从ubuntu迁移到了centos,检查一切正常后就没有太在意. 今天有同事反馈迁移后的机器上的服务一个缓存总是无法获取,对比了下环境.JVM参数,尝试了war包替换等方式照样复现 ...
- sql server 性能调优之 资源等待SOS_SCHEDULER_YIELD
一.概念 SOS_SCHEDULER_YIELD等待类型是一个任务自愿放弃当前的资源占用,让给其他任务使用. 这个等待类型与CPU有直接关系,与内存与也有间接关系,与CPU有关系是因为在sql s ...
- GitHub Gist 指南
Github作为代码分享平台在开发者中非常流行.此平台托管了包括游戏.书籍以至于字体在内的一千两百多万个项目(现在更多),这使其成为互联网上最大的代码库. Github还提供另一个非常有用的功能,就是 ...
- CentOS安装使用.netcore极简教程(免费提供学习服务器)
本文目标是指引从未使用过Linux的.Neter,如何在CentOS7上安装.Net Core环境,以及部署.Net Core应用. 仅针对CentOS,其它Linux系统类似,命令环节稍加调整: 需 ...
- How Tomcat works — 三、tomcat启动(2)
在了解了tomcat 的一些基本组件之后,学习启动过程就更容易理解了,因为启动过程就是启动各个组件. 目录 启动顺序 Bootstrap类 Catalina类 StandardServer类和Stan ...