搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

CSS固定宽度的三列布局运用实例解析

发布时间：2023-01-03 05:40:19 来源：网络
.
雪是一种能够令人产生多种情绪的东西，当窗外那像柳絮、像芦花般的雪花，正在纷纷扬扬地从天而降的时候，当大地被雪花装饰得像铺上白色的地毯一样的时候，站在窗户边上，望着它们。

固定宽度三列布局
这很基础，我们直接看代码便能明白：

XML/HTML Code复制内容到剪贴板
  1. <divid="wrapper">
  2. <divid="header">header</div>
  3. <divid="body"class="cls">
  4. <divid="aside">
  5. <divclass="inner">
  6. aside
  7. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  8. </div>
  9. </div>
  10. <divid="content"class="cls">
  11. <divid="main">
  12. <divclass="inner">
  13. main
  14. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  15. </div>
  16. </div>
  17. <divid="content-aside">
  18. <divclass="inner">
  19. content-aside
  20. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25. <divid="footer">footer</div>
  26. </div>
CSS Code复制内容到剪贴板
  1. #header{width:980px;height:90px;margin:0auto;background:#f60;}
  2. #body{width:980px;margin:0auto;}
  3. #aside{float:left;width:240px;background:#ccc;}
  4. #content{margin-left:240px;}
  5. #main{float:left;width:540px;background:pink;}
  6. #content-aside{float:left;width:200px;background:orange;}
  7. #footer{width:980px;height:90px;margin:0auto;background:#08f;}

实例：实现三列图片等宽等间距布局

每个图片块左浮动,宽30%,左外边距2.5%:
100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%

CSS Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
  6. <title>三列图片等宽布局</title>
  7. <style>
  8. *{
  9. margin:0;
  10. padding:0;
  11. }
  12. img{
  13. display:block;
  14. width:30%;
  15. margin:2.5%002.5%;
  16. float:left;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div>
  22. <imgsrc="byd.jpg"/><imgsrc="byd.jpg"/><imgsrc="byd.jpg"/>
  23. <imgsrc="byd.jpg"/><imgsrc="byd.jpg"/><imgsrc="byd.jpg"/>
  24. <imgsrc="byd.jpg"/><imgsrc="byd.jpg"/><imgsrc="byd.jpg"/>
  25. </div>
  26. </body>
  27. </html>

width: 30%; 表示父级元素宽度的30%.
height: 30%; 如果没有设置父级元素的具体高度,那么这个height是没有效果的.
要实现响应式的正方形,可以使用单位vw(Viewport Width):

CSS Code复制内容到剪贴板
  1. .square{
  2. width:30%;
  3. height:30vw;
  4. background:url("byd.jpg")no-repeatscrollcenter0transparent;
  5. background-size:100%100%;
  6. margin:2.5%002.5%;
  7. float:left;
  8. }

不过需要注意的是,低版本IE和低版本Android/iOS浏览器都不支持视窗(viewport)单位.
或者使用JS根据宽设置高,保证兼容性:

JavaScript Code复制内容到剪贴板
  1. <scriptsrc="jquery.js"></script>
  2. <script>
  3. $(document).ready(function(){
  4. $("img").height($("img").width());
  5. });
  6. $(window).resize(function(){
  7. $("img").height($("img").width());
  8. });
  9. </script>

百分比布局也可以看做是一种响应式布局.
简单实用的 百分比布局 还是很适合手机WAP页面布局的:

CSS Code复制内容到剪贴板
  1. min-width:320px;
  2. max-width:980px;
  3. width:100%;
  4. overflow-x:hidden;
  5. margin:0auto;

最小宽度320px,最大宽度980px,在320px和980px之间自动适应宽度,看起来还行.
在<img>标签里只用设置width属性百分比值,比如width="40%",不用设置height属性,这样图片能够自行按原比例缩放.
容器里面的块,同样可以用百分比布局,比如左边的60%,右边的40%.

本文CSS固定宽度的三列布局运用实例解析到此结束。语文，心灵的回响，惹人走向崇高的殿堂。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:
标签： CSS
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图