固定宽度布局

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. linux下安装mysql数据库与相关操作

    如下命令都是用root身份安装,或者在命令前加上sudo 采用yum安装方式安装 yum install mysql #安装mysql客户端 yum install mysql-server #安装m ...

  2. RMAN_Oracle RMAN的常用Command命令

    2014-12-11 Created By BaoXinjian

  3. CF577B Modulo Sum 好题

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  4. CF 15/09/23

    CF580A 给出一个数列,求最长不下降子序列(连续) 直接DP,O(n) CF580B 主人公有n个朋友,每一个朋友有2个属性:m,sat 现在他想邀请部分朋友,邀请的人满足MAX_M-MIN_M& ...

  5. NeHe OpenGL教程 第十三课：图像字体

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  6. log4net日志信息 插入 mysql数据库？

    log4net配置文件如下: <!--插入数据库--> <appender name="AdoNetAppender_MySql" type="log4 ...

  7. 多窗体之间方法调用 z

    C# Code: /// <summary> /// 主窗体接口 /// </summary> public interface IMdiParent{   void Pare ...

  8. 新建一个mybatis HelloWorld

    1.下载mybatis https://github.com/mybatis/mybatis-3/ 没有梯子好像打不开 下载一个最新版本,我这里下载的是mybatis-3.4.1.zip 里面有myb ...

  9. 九度OJ1081

    这道题又一次更新了我的世界观与人生观Orz……最开始我是设计了一个O(n)的递推算法,本以为可以轻松AC没想到居然TLE了……然后搜了一下题解,才发现这道题要用矩阵的思想去做. 通过对题目的分析,我们 ...

  10. 蓝桥杯---汉字取首字母（位运算 & 水题）

    确实题目虽然有点水,但是开始的时候好像还真的没有想到怎么提取出这个编号一不小心感觉可以可以用unsigned char 这种类型,直接转为16进制,但是之后发现虽然第一次在codeblock中还行,但 ...