首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

关于网站左右布局适配

经过自己的摸爬打滚,最终采取了一种方案:direction + 左右对称 + flex布局。 怎么说呢?...意思就是我们的方向主要是由direction进行控制,比如我们要ltr布局,我们在只需要对HTML标签进行设置。...这样就可以使html布局成为从左往右布局,当然,html的默认的布局方式就是从左往右布局的。如果是从右往左布局的话,那么dir='rtl'就可以了。...direction+左右对称+flex布局来看看 如果我们采用direction+左右对称+flex布局来看看 ?...在2019这个年代了,大部分的浏览器都支持flex布局了,如果是老版本的浏览器,我们也可以考虑不兼容了,直接放弃这一部分的人,就不能惯着。所以这个模式还是可行的,更适合那些左右对称的布局方式。

2.7K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML 文件在PC&移动端完美自适应布局技巧

    本文作者:李晓玮,腾讯 IEG 高级工程师 都2019年了,手机查看HTML邮件的体验怎么还那么差?...优化前: 优化后: 当然,pc端和网页版也要完美适配,outlook、foxmail和网页版效果如下: 一、实现思路 参考比较常见的响应式布局,在PC端使用左图布局,移动端右图。...1 邮箱渲染html的兼容性问题很多,在桌面和移动端渲染电子邮件大约有上百万种不同的组合方式,所以我们要找出一个最小子集来书写html和样式。...二、基本原则 1 由于 OutLook从2003版本为了安全开始便使用 Word HTML 引擎进行渲染,所以我们只能使用table布局,标签也只能使用table / tr / td / span /...3 style标签的支持程度非常碎片化,media query的支持更加有限,所以要用属性和style行内样式来保底布局。 4 邮件html里没有任何脚本。

    4.2K60

    css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

    具体实现方法同三列布局的各种方法原理一致。链接:CSS-三栏响应式布局左右固宽,中间自适应)的五种方法 总结: fixed固定定位 flex布局 三、上下固定的上中下单页布局 - flex实现 ?...四、上下固定中间分左右的单页布局 - flex实现,嵌套使用 在第三的基础上,中间还想分成左右两份,结合第二中section也flex的实现,就有了四。...nav { width: 200px; } 右侧内容占据nav以外的剩余区域即可: article{ flex: 1; } 总结:   flex 套 flex 五、上下固定中间分左右的单页布局...position: absolute; top: 0; bottom: 0; 然后左右的结构布局使用left和宽度配合 比如左边aside直接 left: 0; width...html: 头部 遇到这种布局,通常想到用fixed固定顶部和尾部,然后中间的有个和顶部尾部同值的上下padding

    6.7K20
    领券