html中间块居中宽度自适应
说来，这个其实不是个多难的事情，但是，若没有经验或者没有了解过html原数在浏览器中显示的顺序，可能还真是个问题，不知如何调整。
先说明下，在确定了左右两边显示的块的宽度后，再让中间块的宽度自适应，这里就有一个前提，必须是中间块最后显示。
css：
.left{ float:left; width:170px; background:#00f; }
.right{ float:right; width:170px; background:#0f0;}
.center{ background:#333; margin:0 170px;}
假如，是按照left, center, right的顺序进行html元素的描述。那么当显示right的时候，就可能出问题。下面就可能不是你想要的结果：
<body>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</body>
因为它的展示效果如下：
需要将html的元素顺序做下调整，先左右，再中间。如下：
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</body>
很有用的tips，对于调整页面的布局还是很有用的！
html中间块居中宽度自适应的更多相关文章
- absolute之后居中宽度自适应
position:absolute;之后居中宽度自适应,不用再设定宽度了 css代码如下: .promptBox{display:none;border:1px solid #ccc;paddin ...
- BFC之宽度自适应布局篇
说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...
- 转：CSS布局奇淫技巧之-宽度自适应
css这个东西,说难不难,说容易也不容易.我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里.这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧. 首先讲的是三列布局,左右两列宽 ...
- 固定表头，单元格td宽度自适应，多内容出现-横向纵向滚动条数据表格的<前世今生>
固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生> 先上图例 & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法
Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...
- css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- CSS学习笔记（6）--浮动，三列布局，高度宽度自适应
百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...
- css布局宽度自适应
随着各种终端的不断涌现,网页中的元素适应不同的分辨率变得特别重要,根据经验,涉及到宽度自适应的一共有四种情况: 左端固定,右边自适应:右端固定,左边自适应:两端固定,中间自适应:中间固定,两端自适应. ...
随机推荐
- utf8与utf-8的区别
相信很多程序员刚开始也会有这样的疑惑,如题,我也是. 其实,他们可以这样来区分. 一.在php和html中设置编码,请尽量统一写成“UTF-8”,这才是标准写法,而utf-8只是在wind ...
- matlab 字符分割
http://blog.csdn.net/gotomic/article/details/7898307 注意到以'.'分割时,写成'\.'.前者代表其他含义.可通过help regexp来查询. 例 ...
- css样式兼容不同浏览器问题解决办法
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...
- CUDA 程序中的同步
前言 在并发,多线程环境下,同步是一个很重要的环节.同步即是指进程/线程之间的执行顺序约定. 本文将介绍如何通过共享内存机制实现块内多线程之间的同步. 至于块之间的同步,需要使用到 global me ...
- js基础知识（pomelo阅读）
0,node.js调试: http://www.noanylove.com/2011/12/node-the-inspector-debugging-node-js/ 1,读取配置文件: var ...
- emulator: ERROR: Unable to load VM from snapshot. The snapshot has been saved for a different hardware configuration.
emulator: ERROR: Unable to load VM from snapshot. The snapshot has been saved for a different hardwa ...
- ListView中convertView和ViewHolder的工作原理
http://blog.csdn.net/bill_ming/article/details/8817172
- CentOS搭建Httpd Pyhton3 Django环境
系统环境 centos-6-x86 系统自带httpd 编译安装Python3 pip3 参考 http://www.cnblogs.com/vawter/p/6254170.html 编译安装wsg ...
- 学霸网站之NABCD
1.需求(Need) 随着社会的发展,互联网产业得到了飞速的发展,如今,互联网在各个领域都取得了至关重要的作用,随之而来的数量庞大的数据也让我们每个人在学习生活中倍感压力,如何才能在这些数据中找到自己 ...
- jce
jdk8:jce 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jce8-download-2133166.html jdk ...