说来，这个其实不是个多难的事情，但是，若没有经验或者没有了解过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中间块居中宽度自适应的更多相关文章

  1. absolute之后居中宽度自适应

    position:absolute;之后居中宽度自适应,不用再设定宽度了   css代码如下: .promptBox{display:none;border:1px solid #ccc;paddin ...

  2. BFC之宽度自适应布局篇

    说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...

  3. 转：CSS布局奇淫技巧之-宽度自适应

    css这个东西,说难不难,说容易也不容易.我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里.这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧. 首先讲的是三列布局,左右两列宽 ...

  4. 固定表头，单元格td宽度自适应，多内容出现-横向纵向滚动条数据表格的<前世今生>

    固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>     先上图例   & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...

  5. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  6. Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法

    Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...

  7. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

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

  8. CSS学习笔记（6）--浮动，三列布局，高度宽度自适应

    百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...

  9. css布局宽度自适应

    随着各种终端的不断涌现,网页中的元素适应不同的分辨率变得特别重要,根据经验,涉及到宽度自适应的一共有四种情况: 左端固定,右边自适应:右端固定,左边自适应:两端固定,中间自适应:中间固定,两端自适应. ...

随机推荐

  1. Nunit 使用介绍

    Nunit是.NET平台单元测试框架,其是从Junit发展而来,它强大之处是支持所有的.NET语言. Nunit的下载地址:http://www.nunit.org 介绍1: 布局: 左面:我们写的每 ...

  2. magento currency magento头部增加币种切换选择

    magento currency magento头部增加币种切换选择 默认magento 货币选择切换是显示在左边 有时候我们需要让其显示在头部 Step 1. Create a new file a ...

  3. 第二个Sprint冲刺第二天

    讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 任务:解决了第二个Sprint冲刺第一天遇到的错误. 燃尽图: 遇到的问题: 解决之后: 开发感悟:最近一直在写代码,都很少外出活动了,不知不觉 ...

  4. MySQL优化—工欲善其事，必先利其器之EXPLAIN(转)

    最近慢慢接触MySQL,了解如何优化它也迫在眉睫了,话说工欲善其事,必先利其器.最近我就打算了解下几个优化MySQL中经常用到的工具.今天就简单介绍下EXPLAIN. 内容导航 id select_t ...

  5. dede文章摘要字数的设置方法

    本文转自:http://blog.csdn.net/yxwmzouzou/article/details/17491991 在织梦系统中(针对5.7版本),文章摘要(可以通过以下四种相关标签调用)被设 ...

  6. dedecms 蜘蛛抓取设置 robots.txt

    我们可以用robots.txt屏蔽蜘蛛文件来跟蜘蛛来达成一个协议,但现在很少注重,其实用好robots.txt屏蔽蜘蛛文件,能给你的网站提高权重,接下来重庆SEO讲一下robots.txt屏蔽蜘蛛文件 ...

  7. MongoDB国内学术研究（部分）

    1.<MongoDB在煤炭行业GIS数据存储方面的应用> mongoDB的技术介绍占到了文章的60%,剩下的还能说些啥呢,呵呵. 2.<基于MongoDB的矢量空间数据云存储与处理系 ...

  8. 数组右移（C++）

    数组A,右移k位,要求在线性时间内完成. #include <iostream> using namespace std; template <typename T> void ...

  9. H5标签-canvas实现颜色拾取功能

    HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...

  10. HDU 4686 矩阵快速幂 Arc of Dream

    由式子的性质发现都是线性的,考虑构造矩阵,先有式子,a[i] = ax * a[i-1] + ay; b[i] = bx*b[i-1] +by; a[i]*b[i] = ax*bx*a[i-1]*b[ ...