CSS 布局总结——固定宽度布局

最新推荐文章于 2024-09-11 21:44:44 发布
最新推荐文章于 2024-09-11 21:44:44 发布
阅读量501 收藏
点赞数
分类专栏： css 文章标签： css

固定宽度布局

单列布局


固定宽度的单列布局中，外层指定宽度（如果没指定宽度，会自动伸展），设置 margin: 20px auto; 实现居中即可。

HTML结构：
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <title>单列固定宽度</title>  
  5.         <meta charset="utf-8" />          
  6.     </head>  
  7.       
  8.     <body>  
  9.         <div id="header">  
  10.             <div class="warp">  
  11.                 <h2>Page Header</h2>  
  12.                 <div class="main">  
  13.                     <p>  
  14.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  15.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  16.                     </p>  
  17.                 </div>  
  18.                 <div class="footer">  
  19.                     <p>footer footer footer footer footer footer footer footer</p>  
  20.                 </div>  
  21.             </div>  
  22.         </div>  
  23.               
  24.         <div id="content">  
  25.             <div class="warp">  
  26.                 <h2>Page Header</h2>  
  27.                 <div class="main">  
  28.                     <p>  
  29.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  30.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  31.                     </p>  
  32.                 </div>  
  33.                 <div class="footer">  
  34.                     <p>footer footer footer footer footer footer footer footer</p>  
  35.                 </div>  
  36.             </div>  
  37.         </div>  
  38.               
  39.         <div id="pagefooter">  
  40.             <div class="warp">  
  41.                 <h2>Page Header</h2>  
  42.                 <div class="main">  
  43.                     <p>  
  44.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  45.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  46.                     </p>  
  47.                 </div>  
  48.                 <div class="footer">  
  49.                     <p>footer footer footer footer footer footer footer footer</p>  
  50.                 </div>  
  51.             </div>  
  52.         </div>  
  53.     </body>  
  54. </html>  

CSS：
[css]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. body{  
  2.     font: 13px/1.5 Arial;  
  3.     margin: 0;  
  4.     padding: 0;  
  5. }  
  6. .warp{  
  7.     border: 1px solid black;  
  8.     width: 760px;  
  9.     margin: 10px auto;  
  10. }  
  11. .warp h2{  
  12.     background-color: #666;  
  13.     padding: 20px 20px 10px;  
  14.     margin: 0;  
  15. }  
  16. .warp .main{  
  17.     background-color: #999;  
  18.     padding: 10px 20px;  
  19. }  
  20. .warp .footer p{  
  21.     background-color: #CCC;  
  22.     color: #888;  
  23.     text-align: right;  
  24.     display: block;  
  25.     padding: 10px 20px 20px;  
  26.     margin: 0;  
  27. }  


1-2-1 布局


实现固定宽度的 1-2-1 布局有两种方式，一种是使用 absolute 定位，一种是使用 float 布局。


HTML结构：
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <title>1-2-1 固定宽度</title>  
  5.         <meta charset="utf-8" />          
  6.     </head>  
  7.       
  8.     <body>  
  9.         <div id="header">  
  10.             <p>Header</p>  
  11.         </div>  
  12.               
  13.         <div id="container">  
  14.             <div id="content">  
  15.                 <h2>Content Header</h2>  
  16.                 <div class="main">  
  17.                     <p>  
  18.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  19.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  20.                     </p>  
  21.                 </div>  
  22.             </div>  
  23.             <div id="side">  
  24.                 <h2>Side Header</h2>  
  25.                 <div class="main">  
  26.                     <p>  
  27.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  28.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  29.                     </p>  
  30.                 </div>  
  31.             </div>  
  32.         </div>  
  33.               
  34.         <div id="footer">  
  35.             <p>footer footer footer footer footer footer footer footer</p>  
  36.         </div>  
  37.     </body>  
  38. </html>  
CSS：
[css]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. body{  
  2.     font: 13px/1.5 Arial;  
  3.     margin: 0;  
  4.     padding: 0;  
  5. }  
  6. #header, #container, #footer{  
  7.     width: 760px;  
  8.     margin: 10px auto;  
  9. }  
  10. #header{  
  11.     border: 1px solid black;  
  12.     background-color: #666;  
  13. }  
  14. #footer{  
  15.     border: 1px solid black;  
  16.     background-color: #CCC;  
  17. }  

1）使用 absolute 定位：用这种方法只需要确定其中一列的宽度，并设为 absolute: absolute; 另一列使用margin 定位。 注意父元素设为 position:relative; 而且设为 absolute 的列必须比另一列高度小。

[css]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. #container{  
  2.     position: relative;  
  3. }  
  4. #content{  
  5.     border: 1px solid black;  
  6.     background-color: #999;  
  7.     width: 500px;  
  8.     position: absolute;  
  9.     top: 0;  
  10.     left: 0;  
  11. }  
  12. #side{  
  13.     border: 1px solid black;  
  14.     background-color: #999;  
  15.     margin-left: 520px;  
  16. }  

2）使用float 定位：使用这种方法两列都必须设置宽度，并且要在最后加一个空的元素  <div id="clear"></div> 
[css]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. #content{  
  2.     border: 1px solid black;  
  3.     background-color: #999;  
  4.     width: 500px;  
  5.     float: left;  
  6. }  
  7. #side{  
  8.     border: 1px solid black;  
  9.     background-color: #999;  
  10.     width: 250px;  
  11.     float: right;  
  12. }  
  13. #clear{  
  14.     clear: both;  
  15. }  

1-3-1 布局


所用方法与 1-2-1 布局一样，这里不再赘述

1-((1-2)+1)-1 布局


HTML 结构：
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <title>1-((1-2)+1)-1 固定宽度</title>  
  5.         <meta charset="utf-8" />          
  6.     </head>  
  7.       
  8.     <body>  
  9.         <div id="header">  
  10.             <p>Header</p>  
  11.         </div>  
  12.               
  13.         <div id="container">  
  14.             <div id="content">  
  15.                 <div id="contentHeader">  
  16.                     <p>Content Header</p>  
  17.                 </div>  
  18.                 <div id="columns">  
  19.                     <div id="column1">  
  20.                         <h2>Column1 Header</h2>  
  21.                         <div class="main">  
  22.                             <p>  
  23.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  24.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  25.                             </p>  
  26.                         </div>  
  27.                     </div>  
  28.                     <div id="column2">  
  29.                         <h2>Column2 Header</h2>  
  30.                         <div class="main">  
  31.                             <p>  
  32.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  33.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  34.                             </p>  
  35.                         </div>  
  36.                     </div>  
  37.                 </div>  
  38.             </div>  
  39.             <div id="side">  
  40.                 <h2>Side Header</h2>  
  41.                 <div class="main">  
  42.                     <p>  
  43.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>  
  44.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本  
  45.                     </p>  
  46.                 </div>  
  47.             </div>  
  48.             <div id="clear"></div>  
  49.         </div>  
  50.               
  51.         <div id="footer">  
  52.             <p>footer footer footer footer footer footer footer footer</p>  
  53.         </div>  
  54.     </body>  
  55. </html>  

CSS：
[css]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. body{  
  2.     font: 13px/1.5 Arial;  
  3.     margin: 0;  
  4.     padding: 0;  
  5. }  
  6. #header, #container, #footer{  
  7.     width: 760px;  
  8.     margin: 10px auto;  
  9. }  
  10. #header{  
  11.     border: 1px solid black;  
  12.     background-color: #666;  
  13. }             
  14. #footer{  
  15.     border: 1px solid black;  
  16.     background-color: #CCC;  
  17. }  
  18.   
  19.   
  20. /*使用 float 布局*/  
  21. #content{  
  22.     width: 500px;  
  23.     float: left;  
  24. }  
  25. #side{  
  26.     border: 1px solid black;  
  27.     background-color: #999;  
  28.     width: 240px;  
  29.     float: right;  
  30. }  
  31. #clear{  
  32.     clear: both;  
  33. }  
  34. #contentHeader{  
  35.     border: 1px solid black;  
  36.     background-color: #999;  
  37. }  
  38. #columns{  
  39.     margin: 10px 0;  
  40. }  
  41. #column1{  
  42.     border: 1px solid black;  
  43.     background-color: #999;  
  44.     width: 250px;  
  45.     float: left;  
  46. }  
  47. #column2{  
  48.     border: 1px solid black;  
  49.     background-color: #999;  
  50.     width:210px;  
  51.     float: right;  
  52. }  
lwj0310
关注
专栏目录
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
在CSS布局设计中，三栏布局是一种常见的网页结构，它通常包括左、中、右三部分，其中两侧的栏宽可变，而中间的栏宽固定。本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾...
web前端学习笔记(CSS变化宽度布局)
weixin_30877181的博客
06-05 253
Posted on2013-09-30 09:03Stephen_Liu阅读(2406) 评论(6)编辑收藏 一、“1-2-1”单列变宽布局： 对于变宽度的布局，首先要使内容的整体宽度随浏览器窗口宽度的变化而变化。因此中间的container容器中的左右两列的总宽度也会变化，这样就会产生不同的情况。这两列是按照一定的比例同时变化，还是一列固定，另一列变化...
CSS设计指南---页面布局
weixin_40794404的博客
06-29 1834
CSS设计指南—页面布局 教材：CSS设计指南 实现多栏布局 三种方案： 固定宽度：固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到1100像素宽。 流动： 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。 弹性：弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了
css多列布局不同宽度,浅谈CSS3多列布局
weixin_34790081的博客
08-04 930
相信大家都看过报纸，报纸上的内容大多数都是分栏显示的，如下图所示：对于前端攻城狮来说，这种分列布局，在以前虽然可以实现，可是难度却是不小，工作量很大，必须使用JavaScript对内容分段，再配合上绝对定位或浮动等CSS样式来实现多列布局。但现在，强大的CSS3为我们提供了“multi-column”，让我们可以很轻松的实现这样的分列布局。先来看看与多列布局(multi-column)相关的css...
CSS 布局总结——变宽度布局
warwolf
04-22 1530
变宽度布局 1-2-1 等比例变宽
css极速入门 —— grid布局
05-01
Grid布局是一种强大的CSS布局方案，它可以将容器划分成行和列，产生单元格，然后指定项目所在的单元格。相比Flex布局，Grid布局更为灵活和强大，但学习成本相对困难一些。 基本概念： 1. 容器（container）：有...
css三栏布局——两边宽度固定中间宽度自适应方法总结
qq_52622178的博客
03-31 4134
【方法一】 使用flex布局，是最简便的。 为中间区域的父盒子添加dispaly：flex，将该布局变为flex布局，flex-direction：row表示布局的排列方式为按行排列。flex：1表示来分配剩余空间，5来表示占多少份数 //html代码 <div class="layout"> <header>#header</header> <div class="container"> <div
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
热门推荐
Cinderella_hou的博客
08-08 4万+
今天太累了，写不了了，先留着写。  1.css3之前       三种方法：圣杯布局 2 ， css3新特性    多栏布局    弹性盒模型布局
web初探-css-宽度布局
大碗宽面的博客
08-05 177
布局有很多种，下面是最简单的一种，看图： 绝对定位法 比较麻烦， 就不说了 浮动法 一般都是使用浮动法 储存代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type = "t...
CSS(十二) 宽度布局实践
hlfsunshine的专栏
10-08 421
CSS定位 固定宽度布局-绝对定位法 需要对父标签进行设定，包括高度，还要对自己的宽度高度进行设置，因为他们都已经脱离了标准流 html> head> meta charset="UTF-8"> title>绝对定位法title> style type="text/css"> body{ text-align: center; } #head,#co
CSS布局奇淫技巧之-宽度自适应
tanranran的专栏
11-03 1131
css这个东西，说难不难，说容易也不容易。我觉得最重要的还是经验的积累，正所谓的不积硅步，无以至千里。这一系列文章讲述几种css特殊布局的实现，也当作为自己做个备忘吧。 首先讲的是三列布局，左右两列宽度固定，中间一列宽度自适应 这个很好实现，左右两列分别左浮动和右浮动并给一个固定宽度，中间不浮动，也不设定宽度。这样基本就可以了。但为了兼容IE还必须做些工作。 看下代码结构：
CSS“多列布局”（补充）——WEB开发系列35
一条晒干的咸鱼的博客
09-10 659
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。
水平居中的几种方法（总结）
致未来的你。的博客
09-11 677
水平居中的几种方法（总结）
css鼠标移动过去变成手的图标
qq_38880880的博客
09-10 333
【代码】css鼠标移动过去变成手的图标。
CSS基本语法结构
nice66660的博客
09-10 1312
*某某[属性|=属性值] 选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 *//*某某[属性~=属性值] 选择到的是a标签且有class属性,且属性值有完整的itme词的变 *//*某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一模一样的，多一个空格都不行 *//*某某[属性^=属性值] a标签有class属性且属性值是li开头的 *//*某某[属性$=属性值] a标签有class属性且属性值结尾是t的变 */
VUE实现刻度尺进度条
最新发布
u011753609的博客
09-11 357
VUE实现刻度尺进度条
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 4705
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值