三栏的网页布局,中间宽度自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>

<title>无标题文档</title>

<link  href="style.css" rel="stylesheet" />

<style type="text/css">

#box

{

/*高度必须设置,否则IE下子元素的absolute定位异常。且此处应设置为100%,因为内容部分的高度不确定。*/

height:100%;

position:relative;

}

#middle

{

height:100px;

margin:0 200px;

background-color:red;

}

#left

{

height:100px;

width:200px;

position:absolute;

top:0px;

left:0px;

background-color:green;

}

#right

{

height:100px;

width:200px;

position:absolute;

top:0px;

right:0px;

background-color:blue;

}

</style>

</head>

<body>

<div id="box">

<!--优先加载中间部分,后加载两侧-->

<div id="middle"></div>

<div id="left"></div>

<div id="right"></div>

</div>

</body>

</html>

三栏的网页布局,中间宽度自适应

时间: 2024-10-05 04:09:43

三栏的网页布局,中间宽度自适应的相关文章

三栏的网页布局,中间内容不确定高,问怎么让两边的背景始终与内容高度一致

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

CSS display:table属性用法- 轻松实现了三栏等高布局

display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用,但是现在是移动端的天下了,ie 说拜拜吧~ 与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, posi

【技术】三列浮动,中间列宽度自适应

使用绝对定位之后的对象,无需再考虑它在页面中的浮动关系,只要设置对象的top,right,bottom,left四个方向的值即可. html部分: <div id="left">zzzzzz</div><div id="center">cccc</div><div id="right">rrrrr</div> css部分: #left{ background-color: #

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

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

从三栏自适应宽度布局到css布局的讨论

如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就会自适应了,下面是一个实时的demo: left  middle  right  但是table布局是不推荐的,table布局是css流行之前使用的布局,有很多缺点:当table加载完之前,整个table的都是空白的,table将数据和排版参和在一起,使得页面混乱,并且table布局修改排版十分麻烦

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

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

使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法 绝对定位法原

(转转转)使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于CSS3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法 绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin

三栏布局 中栏实现自适应宽度

对于div自适应宽度,网上的说法基本上都是将要自适应宽度的div放在其它固定宽度的最后,不指定其float属性或将float属性指定为none,比如三栏布局居中的一栏为自适应宽度,就可以这样来定义三栏div: <div id="left" style="float:left;width:100px;">这是左栏</div> <div id="right" style="float:right;width:1