固定宽度布局

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. 黄聪：HtmlAgilityPack，C#实用的HTML解析类 ---- HtmlNode类

    HtmlAgilityPack中的HtmlNode类与XmlNode类差不多,提供的功能也大同小异.下面来看看该类提供功能. 一.静态属性 public static Dictionary<st ...

  2. Flink on Yarn运行机制

    从图中可以看出,Yarn的客户端需要获取hadoop的配置信息,连接Yarn的ResourceManager.所以要有设置有 YARN_CONF_DIR或者HADOOP_CONF_DIR或者HADOO ...

  3. ADF_ADF Faces系列3_ADF数据可视化组件简介之建立Master-Detail

    2013-05-01 Created By BaoXinjian

  4. js复习（二）

    一.window.document对象(一)找元素 docunment.getElementById("id"):根据id找,最多找一个: docunment.getElement ...

  5. 关于this指向思考

    事情起因为<js函数式编程指南>里面看到这段话: 上例DB对象中的save方法作为参数传入到fs的readFile,按道理this指向DB,为啥作者的意思是存在this指针可能会指向其他地 ...

  6. google protobuf 简单实例

    1.定义proto文件: User.proto package netty; option java_package="myprotobuf"; option java_outer ...

  7. Python应用02 Python服务器进化

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! **注意,在Python 3.x中,BaseHTTPServer, SimpleH ...

  8. JavaScript【面向对象】-静态方法-私有方法-公有方法-特权方法

    JavaScript面向对象是近年来比较火的一个概念了,由于小弟才疏学浅,虽然做过不少的web项目,看了网上很多深奥的资料和教程,还是对他们深奥 的理论一知半解,前段时间看了点书,总算有了自己的理解, ...

  9. EXPDP

    源地址:http://blog.csdn.net/zftang/article/details/6387325

  10. pymongo带认证连接mongo

    import pymongo connection = pymongo.MongoClient("127.0.0.1") connection.database.authentic ...