电脑系统城官网 - 一键重装系统-Win7旗舰版/win10 64位系统下载,唯一官网:www.pcxitongcheng.com!

当前位置:首页 > 网页制作 > HTML/Xhtml > 详细页面

详解左右宽度固定中间自适应html布局解决方案

时间:2019-12-05来源:系统城作者:电脑系统城

本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下:

a.使用浮动布局

html结构如下


 
  1. <div class="box">
  2. <div class="left">left</div>
  3. <div class="right">right</div>
  4. <div class="center">center</div>
  5. </div>
  6. //此处注意要先渲染左、右浮动的元素才到中间的元素。元素浮动后剩余兄弟块级元素会占满父元素的宽度
  7. <style>
  8. .box{
  9. height:200px;
  10. }
  11. .left{
  12. float:left;
  13. width:300px;
  14. }
  15. .right{
  16. float:right;
  17. width:300px;
  18. }
  19. </style>

b.使用固定定位

html结构如下


 
  1. <div class="box">
  2. <div class="left">left</div>
  3. <div class="right">right</div>
  4. <div class="center">center</div>
  5. </div>
  6. //和浮动布局同理,先渲染左右元素,使其定位在父元素的左右两端,剩余的中间元素占满父元素剩余宽度。
  7. <style>
  8. .box{
  9. position: relative;
  10. }
  11. .left{
  12. position: absolute;
  13. width: 100px;
  14. left: 0;
  15. }
  16. .right{
  17. width:100px;
  18. position: absolute;
  19. right: 0;
  20. }
  21. .center{
  22. margin: 0 100px;
  23. background: red;
  24. }
  25. </style>

c.表格布局

将父元素display:table,子元素display:table-cell,会将它变为行内块。

这种布局方式的优点是兼容性好。


 
  1. <div class="box">
  2. <div class="left">
  3. left
  4. </div>
  5. <div class="center">
  6. center
  7. </div>
  8. <div class="right">
  9. right
  10. </div>
  11. </div>
  12. <style>
  13. .box{
  14. display: table;
  15. width: 100%;
  16. }
  17. .left{
  18. display: table-cell;
  19. width: 100px;
  20. left: 0;
  21. }
  22. .right{
  23. width:100px;
  24. display: table-cell;
  25. }
  26. .center{
  27. width: 100%;
  28. background: red;
  29. }
  30. </style>

d.弹性布局

父元素display:flex子元素会全部并列在一排。

子元素中flex:n的宽度会将父元素的宽度/n

如flex:1,宽度就等于父元素高度。

弹性布局的缺点是兼容性不高,目前IE浏览器无法使用弹性布局


 
  1. <div class="box">
  2. <div class="left">
  3. left
  4. </div>
  5. <div class="center">
  6. center
  7. </div>
  8. <div class="right">
  9. right
  10. </div>
  11. </div>
  12. <style>
  13. .box{
  14. display: flex;
  15. width: 100%;
  16. }
  17. .left{
  18.  
  19. width: 100px;
  20. left: 0;
  21. }
  22. .right{
  23. width:100px;
  24. }
  25. .center{
  26. flex:1;
  27. }
  28. </style>

e.网格布局

父元素display:grid;

grid-templatecolumns:100px auto 100px;

依次为第一个子元素宽100px 第二个自适应 第三个100px;

网格布局的优点是极为简便,直接通过父元素样式决定,缺点是兼容性不高。


 
  1. <div class="box">
  2. <div class="left">
  3. left
  4. </div>
  5. <div class="center">
  6. center
  7. </div>
  8. <div class="right">
  9. right
  10. </div>
  11. </div>
  12. <style>
  13. .box{
  14. display: grid;
  15. grid-template-columns: 100px auto 100px;
  16. width: 100%;
  17. }
  18. </style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

分享到:

相关信息

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载

公众号