使用绝对定位进行三列布局

在布局中有一种特殊的情况,当布局中分多个列,并且需要对其中的不部分列进行规定宽度,需要利用绝对定位进行布局。

用三列布局为例,我们规定左列的宽度为200,右列的宽度为300,中间列的宽度自适应,即是整个body宽度除去左右列的宽度。

具体思路:将左右列设为绝对定位,使他们紧贴在左右边。将中间列的margin左右边距设为左右列的宽度。(一般我们为了美观将边距多设10px)

<!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>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0; right:0px; background:#FCC;}
</style>
</head>

<body>

<div class="left">left</div>
<div class="main">middle</div>
<div class="right">right</div>
</body>
</html>
时间: 2024-11-03 22:04:02

使用绝对定位进行三列布局的相关文章

Css布局系列-经典三列布局

今天给大家介绍经典三列布局和实现原理: 通过浮动(float)进行实现,如果对float不是很清楚可以去看看我上篇介绍的: 通过绝对定位布局: 通过float加margin的负值进行组合实现.  对三种情况分析: 第一种通过浮动(float)布局,特别需要注意在定义元素结构的时候要将居中元素放到right元素的后面(container->left-right-center),不能像正常那种思维去定义结构(container ->left-center-right): *{margin: 0;p

CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题

一: 右侧固定宽度 左侧自适应  第一种方法:左侧用margin-right,右侧float:right  就可以实现.     HTML代码可以如下写:    <div>        <a href="" target="_blank">我是龙恩</a>    </div> <div>        <a href="" target="_blank">

三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化

第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link rel="stylesheet" type="text/css" href="task0001.css"> </head> <body> <div class="wrap"> <di

三列布局,中间自适应,关于float和positon方法

三列布局,中间自适应,尝试了两种方法float.mydiv{ background-color: #eee; margin:20px; padding: 20px; border: solid 1px #999; overflow: auto; } .left { float: left; width: 160px; height: 100px; background: blue; padding: 20px; } .right{ float: right; width: 80px; heigh

CSS三列布局

× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中间自适应.两列定宽一侧自适应.中间定宽两侧自适应.一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中间自适应布局 思路一:  float [1]float + margin + calc <style> p{margin: 0;} .parent{overflow: hidden;} .left

CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局. 1. 首先,使用浮动布局来实现一下 See the Pen float-three-columns by xal821792703 (@honoka) on CodePen. 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的

经典三列布局

html代码中,middle部分首先要放在container的最前面,然后是left,right.三列布局,中间宽度自适应,两边定宽.1.[国外]圣杯布局:左中右三列都设置浮动和相对定位,中列宽度100%占满,左右两列都有负边距,左列有左定位数,右列有右定位数.(IE6有问题) <div class="cupContainer"> <div class="middle">中列</div> <div class="l

web标准(复习)--3 二列和三列布局

今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三列固定宽度居中 IE6的3像素bug 一.两列自适应宽度下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助css的浮动来实现.首先创建html代码如下: <style>#side { background-color:#99F

简单的CSS网页布局--三列布局

三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>三列自适应</title> 6 <style type="text/