<!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=gb2312" />
<title>CSS布局</title>
<style>
body{
margin:0px; height:100%
}
#left{
background-color:#cccccc;
border-right:1px solid #333333;
width:100px;
height:100%;
position:absolute;
top:0px;
left:0px;
}
#center{
background-color:#cccccc;
border:0px solid #333333;
height:100%;
margin-left:100px;
margin-right:100px;
}
#right{
background-color:#cccccc;
border-left:1px solid #333333;
width:100px;
height:100%;
position:absolute;
right:0px;
top:0px;
}
</style>
</head>
<body>
<div id="left">左列</div>
<div id="center">中列</div>
<div id="right">右列</div>
</body>
</html>
分享到：
相关推荐
CSS网页布局入门教程8：三列浮动中间列宽度自适应 在本篇教程中，我们将探讨如何使用CSS实现三列浮动中间列宽度自适应的网页布局。这种布局方式需要满足以下要求：左栏固定宽度，居左显示；右栏固定宽度，居右显示...
三栏布局“左右宽度固定，中间自适应宽度” 方法1、设置浮动，使文档脱离文档流，注意层的顺序 方法2、同样通过负边距来实现，缺点是需要另外增加一个层 方法3、也可以通过绝对定位来实现
javascript瀑布流实现的两种方式：固定列数的浮动布局与绝对定位自适应宽度 (1).docx
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1...
宽度自适应的元素可以是：绝对位定、浮动元素、行内元素。而我们通常布局，肯定不会用行内元素，所以会选择，绝对定位或浮动。 2.居中：这里我们应该会想到1/2、50%、一半等这些东西。 上图中：黑色为body，深...
本文介绍了详解左右宽度固定中间自适应html布局解决方案，分享给大家，具体如下： a.使用浮动布局 html结构如下 <div class=left>left <div class=right>right <div class=center>center //此处注意要先渲染左...
前面已经介绍过单列定宽单列自适应的两列布局，而两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。本文将从float、table和flex来介绍两列自适应布局的3种思路。 思路一: float 在单列定宽单列...
两列定宽加一列自适应布局 本布局模式一共分为三列，其中两列宽度固定，一列宽度随内容宽度而改变。简易实现代码如下： 两列定宽加一列自适应 本案例中每一列高度为自适应，即高度和内容高度一致，左列和中列宽度为...
答案：浮动布局是一种CSS布局方式，能够使元素浮动在父元素中，实现自适应宽度按钮的效果。 4. 如何使用a标签和span标签来组合出完整的圆角矩形按钮？ 答案：可以使用a标签作为按钮的容器，span标签作为按钮的文字...
HTML实现2列布局，左侧宽度固定，右侧自适应 实现一： <style> body, html{padding:0; margin:0;} // 根据CSS定位，利用浮动或绝对定位，使左侧的块元素脱离常规文档流,可以与右边块元素并列 div:nth-of-...
假设高度已知，请写出三栏布局，其中左右宽度均为300px，中间自适应。 看了上面的题目，有经验的人也许会觉得很简单，仔细想想，如果我们来写，能写出几种方案呢？一般都会想到两种吧，float和position定位，其实...
3.8 三列浮动中间列宽度自适应 3.9 高度自适应 3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin加倍问题 3.11 深入浮动(Float) 3.11.1 文档流...
特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta:所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的前端界面时候需要用到全屏布局时采用的就是此种布局...
两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。 当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法。可以给受到影响的元素设置 ...
2、自适应(弹性)宽度CSS版式布局 3、标准布局常见问题及解决办法 像素问题及解决办法 上边容器浮动后，下边的容器跟着浮动，造成页面错乱 当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？ 相对定位与...
1，水平居中的方法2，垂直居中的方法4，三列布局（中间固定两边自适应宽度）5，BFC 有什么用6，清除浮动的几种方式7，CSS3有哪些新特性8，css3 新增伪
三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。 我们不妨假定这样一个布局：高度已知，其中左栏、右栏宽度各为...
网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。 首先三个元素横向排列，用浮动...
9.5.3 二列右列宽度自适应 208 9.5.4 二列固定宽度居中 209 9.6 三列布局 210 9.6.1 中列宽度自适应 210 9.6.2 三栏布局 212 9.7 高度自适应 215 9.8 小结 216 第4篇 实战演习 第10章 div+CSS打造Blog版面 218 10.1 ...
表格和框架是用于创建多列布局的主要工具。虽然他们能完成工作（但其实非常糟糕）。 把目光投向今天。HTML和CSS已经变得非常复杂，Web设计的知名度和复杂度与日俱增。我们曾经使用的旧的布局方法显然已经out了。然而...