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

Developer 发布于2019-08-29 16:55 / 1900人阅读

摘要：弹性布局的缺点是兼容性不高，目前浏览器无法使用弹性布局网格布局父元素依次为第一个子元素宽第二个自适应第三个网格布局的优点是极为简便，直接通过父元素样式决定，缺点是兼容性不高。

a.使用浮动布局
html结构如下


    left
    right
    center
   
//此处注意要先渲染左、右浮动的元素才到中间的元素。元素浮动后剩余兄弟块级元素会占满父元素的宽度

b.使用固定定位
html结构如下


    left
    right
     center
 
//和浮动布局同理，先渲染左右元素，使其定位在父元素的左右两端，剩余的中间元素占满父元素剩余宽度。

c.表格布局
将父元素display:table，子元素display:table-cell，会将它变为行内块。
这种布局方式的优点是兼容性好。


  
    left
  
  
    center
  
  
    right

d.弹性布局
父元素display：flex子元素会全部并列在一排。
子元素中flex:n的宽度会将父元素的宽度/n
如flex:1，宽度就等于父元素高度。
弹性布局的缺点是兼容性不高，目前IE浏览器无法使用弹性布局


  
    left
  
  
    center
  
  
    right

e.网格布局
父元素display:grid;
grid-templatecolumns:100px auto 100px;
依次为第一个子元素宽100px 第二个自适应第三个100px;
网格布局的优点是极为简便，直接通过父元素样式决定，缺点是兼容性不高。


  
    left
  
  
    center
  
  
    right

GPU云服务器云服务器 html的宽度自适应自适应宽度宽度自适应自适应宽度按钮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113979.html

4种方法实现边栏固定中间自适应的3栏布局

摘要：布局结果依然后前两种相似，代码如下。如果你还有好的方法，请一定给我留言哦欢迎光临小弟博客我的博客原文种方法实现边栏固定中间自适应的栏布局设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效果： See the Pen...

EddieChan 2019-08-28 18:07 评论0 收藏0
4种方法实现边栏固定中间自适应的3栏布局

摘要：布局结果依然后前两种相似，代码如下。如果你还有好的方法，请一定给我留言哦欢迎光临小弟博客我的博客原文种方法实现边栏固定中间自适应的栏布局设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效果： See the Pen...

MoAir 2019-08-01 14:47 评论0 收藏0
左右两侧宽度固定,中间自适应之【圣杯+双飞翼】实现

摘要：圣杯左右两侧宽度固定中间自适应一般我们在写这种三列布局时希望中间主体部分优先渲染因此在中把部分提到和前面。布局定宽设置固定像素自适应设置宽度为固定和位置以上代码因为的宽度是撑满了整个页面后面浮动的掉到了下面可以设置把和位置重排。左右两侧宽度固定,中间自适应这种布局相信很多feers都遇到过,可是有可能你没有系统的研究过有哪几种解决方案,本文章立志以浅显的语言来讲解其中一种圣杯解决方案...

loostudy 2019-08-29 12:51 评论0 收藏0
常见的面试问题：【CSS】已知高度，写出三栏布局

摘要：问题已知高度，写出三栏布局，其中左右两栏宽度各位，中间自适应回答效果示例解决方案浮动绝对定位弹性布局表格布局网格布局。方案二绝对定位将和的都设置脱离文档流，给的设置左右两边距离即左右两边盒子的实际宽度。问题：已知高度，写出三栏布局，其中左右两栏宽度各位200px，中间自适应showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...

MobService 2019-08-02 15:33 评论0 收藏0