固定宽度布局

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. 黄聪：wordpress如何获取当前分类页面的ID、名称、别名（slug）

    <? global $wp_query; $cat_ID = get_query_var('cat'); $category = get_category($cat_ID); echo $cat ...

  2. (WPF) MVVM: ComboBox Binding, XML 序列化

    基本思路还是在View的Xmal里面绑定ViewModel的属性,虽然在View的后台代码中也可以实现binding,但是还是在Xmal里面相对的代码量要少一些. 此例子要实现的效果就是将一个List ...

  3. C#学习笔记四: C#3.0自动属性&匿名属性及扩展方法

    前言 这一章算是看这本书最大的收获了, Lambda表达式让人用着屡试不爽, C#3.0可谓颠覆了我们的代码编写风格. 因为Lambda所需篇幅挺大, 所以先总结C#3.0智能编译器给我们带来的诸多好 ...

  4. ClassLoader 机制

    JAVA启动后,是经过JVM各级ClassLoader来加载各个类到内存.为了更加了解加载过程,我通过分析和写了一个简单的ClassLoader来粗浅的分析它的原理. JVM的ClassLoader分 ...

  5. Android: 触屏fling/scroll/drag的区别及其详细过程

    Google了一下,终于搞清了touch screen下的几种操作模式(对应的是事件). 对于一个view, 常用的操作有点击(click)和长按(long press)二种.实际上,这些操作类型是A ...

  6. Redefining already defined constructor

    报错:Strict standards: Redefining already defined constructor for class SplitWord in D:\wamp\www\wsc\i ...

  7. Linux删除乱码文件名或者目录名

    有时,rz上传文件失败或者不小心输入命令会产生乱码文件名.因为用rm 删除特殊字符基本无效,故找到了下面两种简单易用的方法: 例子: [langxiaowei@mirror:~]$ ls ??     ...

  8. python（5）字符串处理 （sub,replace,find,index,upper,strip，split，sub翻页

    一,sub和replace的用法 re.sub 函数进行以正则表达式为基础的替换工作 re.sub替换到目标字符串中的a,b或者c,并全部替换 另加上sub翻页操作: re.sub('start=\d ...

  9. Mac下的eclipse按住ctrl点击无法查看类文件

    问题主要是项目的.project或者.build文件有问题,github上check的另一个项目就没有这样的现象,可以新建一个项目,然后把新建项目的这两个文件一一替换无法ctrl点击的项目中的文件. ...

  10. 值不能为 null 或为空。参数名: linkText

    “/”应用程序中的服务器错误. 值不能为 null 或为空.参数名: linkText 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的 ...