html中间块居中宽度自适应

说来,这个其实不是个多难的事情,但是,若没有经验或者没有了解过html原数在浏览器中显示的顺序,可能还真是个问题,不知如何调整。

先说明下,在确定了左右两边显示的块的宽度后,再让中间块的宽度自适应,这里就有一个前提,必须是中间块最后显示

css:

1 .left{ float:left; width:170px; background:#00f; }
2 .right{ float:right; width:170px; background:#0f0;}
3 .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的元素顺序做下调整,先左右,再中间。如下:

1 <body>
2 <div class="left">left</div>
3 <div class="right">right</div>
4 <div class="center">center</div>
5 </body>

很有用的tips,对于调整页面的布局还是很有用的!

时间: 2024-08-04 19:04:23

html中间块居中宽度自适应的相关文章

ul宽度自适应让li居中

在div中ul不知道宽度的情况下,让li和内容居中,在做网站时,列表分页用的就是ul列表,但ul是不能给定义宽度的,应该分页数是随着内容变化的,这样的话,要让分页总是显示在中间部位,就不能再用常用的margin或是text-align这些居中的属性了,下面是这段可以让ul没有宽度的情况下,就可以居中的代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime;} #right { float: right; width: 200px; background: lime;} #center { margin:0 200px; background: blue} html: <div id="left">left</div>

抛砖引玉之宽度自适应布局

抛砖引玉之宽度自适应布局 什么是宽度自适应布局呢? 就是当浏览器窗口大小改变时,浏览器里的元素宽度也随之改变,从而达到自适应布局. 常见的宽度自适应布局有: 1.  两列:左边宽度不变,右边宽度自适应 2.  三列:左右两边宽度不变,中间部分自适应 3.  三列:左右两边宽度自适应,中间部分不变 一.利用div+css实现以上“自适应布局” (1)两列:左边宽度固定,右边宽度自适应 利用div+float+margin,已在随笔‘float剖析’中讲解,具体代码和效果图见下: <!DOCTYPE

记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。

前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用一行.像这样 当屏幕大于600px时,是这样 我做出来用了css3的@media,如果不用这个,好吧,水平有限想不出来... 下面是代码: <!DOCTYPE> <html> <head> <style> body{ margin: 0 ; padding: 0

左右两栏宽度自适应,中间一栏宽度固定

左右两栏宽度自适应,中间一栏宽度固定:中间一栏宽度固定,左右两栏宽度自适应效果在众多网页中都有应用,有不错的使用效果,下面就简单介绍一下如何此效果:代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <

手机网页宽度 , 图片宽度 自适应

网页宽度 页面box不要写宽度或 width:100% 之类的 去掉 头部加上下面代码: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 图片宽度 <script type="text/javascript"> f

二列div宽度自适应

二列div宽度自适应:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在之前的教程已经介绍了一列div宽度自适应.实现自适应效果的主要手段就是设置对象的width属性值为百分数.代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com

一列div宽度固定、一列div宽度自适应

一列固定.一列宽度自适应:建议:尽可能的手写代码,可以有效的提高学习效率和深度.之前的代码中,已经介绍过一列宽度自适应和二列宽度自适应,实现自适应的效果一般就是将相应对象的宽度以百分比的形式表示.在实际的布局中,一列宽度固定.一列宽度自适应.下面我们就以左侧div宽度固定,右侧div宽度是自适应为例.代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta n

图片超过DIV宽度自适应

.main_con img { max-width: 610px; height: auto; cursor: pointer; border: 0px double #cccccc; padding: 2px; zoom: expression( function(elm) { if (elm.width>610) { var oldVW = elm.width; elm.width=610; elm.height = elm.height*(610 /oldVW); } elm.style.