固定宽度布局

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. [Bug-IOS] - linker command failed with exit code 1 (use -v to see invocation)

    Ld /Users/Rubert/Library/Developer/Xcode/DerivedData/OC_Language-emftyzftyvhdpuaxipddjmpnpvox/Build/ ...

  2. AP_AP系列 - 费用报表分析（案例）

    2014-07-08 Created By BaoXinjian

  3. c++代码模板

    c++代码模板 &代码: #include <bits/stdc++.h> using namespace std; typedef long long ll; const int ...

  4. about_并查集

    前天刚学了并查集,挺好用的,虽然我现在只会用它来解决是不是亲戚啊,是不是朋友啊,带权并查集还不是很理解. 并查集也叫做不相交集合,主要有3个操作,初始化,查找,合并. 并查集其中一个很大的应用就是kr ...

  5. C#2

    同名的两个类如果在不同的命名空间中,相互之间是不会混淆的. 一个名为TextHello的命名空间中创建一个名为Program的类,引用方法 TextHello.Program 我们常用的Console ...

  6. Git的撤消操作 - 重置, 签出 和 撤消（转载）

    From:http://gitbook.liuhui998.com/4_9.html http://ihower.tw/blog/archives/2622 相较于SVN这种commit就推送到远端伺 ...

  7. Python补充01 序列的方法

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在快速教程中,我们了解了最基本的序列(sequence).回忆一下,序列包含有定值 ...

  8. 注意，ruby循环体定义的变量在结束时后，变量还存在

    a = [1, 2, 3] for i in a b = 123 p i end p "b:#{b}" p i <ruby语言编程> 129页 倒数 第8行

  9. Replace JSON.NET with ServiceStack.Text in ASP.NET Web API

    Because ServiceStack.Text performs much better I recently stumbled across a comparison of JSON seria ...

  10. NLog文章系列——如何配置NLog(转)

    NLog使用方法 作者:Jaros?aw Kowalski <> 翻译:CrazyCoder(由衷感谢他的热心!!) 原文:http://www.nlog-project.org/conf ...