固定宽度布局

1-2-1布局（浮动）

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

<head>

<title>固定宽度-float</title>

<style type="text/css">

#header,#footer,#container{

    width: 760px;

    margin: 0 auto;

}

#content {

    float: left;

    width: 500px;

    background: #d5ddf3;

}

#side {

    float: left;

    width: 260px;

    background: #d2d8de;

}

#footer {

    clear: both;

    background: #d5ddf3;

}

</style>

</head>

<body>

    <h2>Page Header</h2>

</div>

<div id="container">

    <div id="content">

        <h2>Page Content 1</h2>

        <p>This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.</p>

    </div>

    <div id="side">

        <h2>Side Bar 1</h2>

        <p>This is side.This is side.This is side.This is side.This is side.This is side.This is side.This is side.</p>

    </div>

</div>

<div id="footer">

        <h2>Page Footer</h2>

</div>

</body>

</html>

效果图：

正中间的两个div都浮动起来，且包含块的宽度是固定值。Footer清除浮动防止浮动块覆盖。

1-2-1布局（绝对定位）

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

<head>

<title>固定宽度-absolute</title>

<style type="text/css">

#header,#footer,#container{

    width: 760px;

    margin: 0 auto;

}

#container{

    position:relative;

}

#content {

    width: 500px;

    margin-right:260px;

    background: #d5ddf3;

}

#side {

    position:absolute;

    top:0;

    right:0;

    width: 260px;

    background: #d2d8de;

}

#footer {

    background: #d5ddf3;

}

</style>

</head>

<body>

    <h2>Page Header</h2>

</div>

<div id="container">

    <div id="content">

        <h2>Page Content 1</h2>

        <p>This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.</p>

    </div>

    <div id="side">

        <h2>Side Bar 1</h2>

        <p>This is side.This is side.This is side.This is side.This is side.This is side.This is side.This is side.</p>

    </div>

</div>

<div id="footer">

        <h2>Page Footer</h2>

</div>

</body>

</html>

效果图：

但是有一点要注意，由于用绝对定位的块脱离的文档流，当绝对定位块高度小于旁边块高度的时候，会与其他块重叠。

流式布局

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

<head>

<title>float</title>

<style type="text/css">

#header,#footer,#container{

    width: 85%;

    margin:0 auto;

}

#content {

    float:left;

    width: 66%;

    background: #d5ddf3;

}

#side {

    float:right;

    width: 33%;

    background: #d2d8de;

}

#footer {

    cleat:both;

    background: #d5ddf3;

}

</style>

</head>

<body>

<div id="header">

    <h2>Page Header</h2>

</div>

<div id="container">

    <div id="content">

        <h2>Page Content 1</h2>

        <p>This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.This is content.</p>

    </div>

    <div id="side">

        <h2>Side Bar 1</h2>

        <p>This is side.This is side.This is side.This is side.This is side.This is side.This is side.This is side.</p>

    </div>

</div>

<div id="footer">

        <h2>Page Footer</h2>

</div>

</body>

</html>

效果图：

注意：确保不要使得某列的宽度太大。

另外，百分比布局经常会结合min-width和max-width使用。

CSS常用布局整理的更多相关文章

  1. CSS常用布局整理（二）

    1-2-1单列变宽布局 side列定宽300px,content列变宽,尺寸是100%-300px.核心的问题就是浮动列的宽度应该等于“100% - 300px”,而CSS显然不支持这种带有减法运算的 ...

  2. CSS常用布局实现方法

    CSS 布局对我来说,既熟悉又陌生.我既能实现它,又没有很好的了解它.所以想总结一下,梳理一下 CSS 中常用的一列,两列,三列布局等的实现方法.本文小白,仅供参考.但也要了解下浮动,定位等. 一.一 ...

  3. css常用布局

    1.一列布局 html: <div class="header"></div> <div class="body">< ...

  4. css 常用布局

    「前端那些事儿」③ CSS 布局方案 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1.水平居中 a ...

  5. HTML/CSS 常用单词整理

    页面布局(layout) header 头部/页眉: index 首页/索引: logo 标志: nav/sub_nav 导航/子导航: banner 横幅广告: main/content 主体/内容 ...

  6. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  7. html+css 常用布局

    1.中间固定宽度,两侧自适应 1.1 flex布局 <!DOCTYPE html><html lang="en"> <head> <met ...

  8. CSS常用样式整理

    元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: p ...

  9. CSS Flex布局整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

随机推荐

  1. 实现web数据同步的四种方式

    http://www.admin10000.com/document/6067.html 实现web数据同步的四种方式 1.nfs实现web数据共享 2.rsync +inotify实现web数据同步 ...

  2. HashMap 实现原理（复习)

    1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端. 数组 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1 ...

  3. WebADI_Oracle ERP R12使用前WebADI设定（案例）

    2014-12-25 Created By BaoXinjian

  4. c# 函数及out传值

    使用 out传值的时候仅仅是将变量名(箱子)拿过来,并不会管之前是什么值函数体结束之前必须对该out的参数进行赋值,否则报错(不好意思还回去)out传值,可以进行多个值的传回 public void ...

  5. java8 JDK8 元空间

    一. JDK8 元空间概念 二. PermGen vs. Metaspace 运行时的比较     一. JDK8 元空间概念         很多开发者都在其系统中见过“java.lang.OutO ...

  6. CSS学习笔记之定位

    position 有4中不同类型的定位,分别为static.relative.absolute.fixed 1.static 元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创 ...

  7. 你应该知道的jQuery技巧

    帮助提高你jQuery应用的简单小技巧. 回到顶部按钮 图片预加载 判断图片是否加载完 自动修补破损图像 Hover切换class类 禁用输入 停止正在加载的链接 toggle fade/slide ...

  8. 打造高性能Java应用需掌握的5大知识

    这篇文章节选自<java performance>,对java性能比较关心的同学大概都知道这本书,性能这个东西可能是很多同学在日常写java code的时候很少去关心的,但是在我们写cod ...

  9. 20145305 《Java程序设计》实验一

    实验名称 实现凯撒密码,并进行测试. 实验内容 它是一种代换密码.据说凯撒是率先使用加密函的古代将领之一,因此这种加密方法被称为恺撒密码. 凯撒密码作为一种最为古老的对称加密体制,在古罗马的时候都已经 ...

  10. java异常处理机制throw