当前位置：首页 > Web前端 > HTML

三栏布局总结

时间：2023-04-02 16:33:28 HTML

前言所谓三栏式布局，即使是指两边固定宽度，中间自用宽度的布局方式，在以往也一直是个让人头疼的问题。为了解决这个问题，出现了各种花招和招数。最著名的非圣杯布局和双飞翼布局是唯一的，但是自从CSS3发展以来，尤其是对flexbox布局的支持越来越好，这个问题也越来越淡化。文本浮动布局HTML如下：Left

Right

Main

CSS如下：body,html{height:100%;填充：0；保证金：0；}。左{背景：红色；宽度：100px；向左飘浮;高度：100%；}.main{背景：蓝色；高度：100%；左边距：100px；右边距：200px；红色的;宽度：200px；浮动：对；高度：100%；}浮动布局代码比较简单易懂，但浮动时经常会出现崩溃等问题，而且浮动渲染计算量大，在移动端性能较差。另外需要注意的是main，也就是中间的部分，需要放在最后。如果是left-main-right方式，主体部分会占据剩余空间，右边会被推到下一行。反之，如果我们设置了right和left的话，主体部分就会流入left和right的底部，从而达到我们的目的。绝对定位HTML如下：left

mainrightCSS如下如下：身体，html{高度：100%；填充：0；边距：0；}.left，.right{位置：绝对；顶部：0；背景：红色；高度:100%;}.left{左:0;宽度：100px;}.right{right:0;width:200px;}.main{margin-left:100px;右边距：200px；高度：100%；background:blue;}这种方法有一个明显的缺点，就是如果中间的列包含最小宽度限制，或者包含有宽度的内部元素。当浏览器宽度小到一定程度时，就会出现重叠图层。到外层容器的padding位置，从而实现目标HTML如下：mainleftrightCSS如下：body,html{height:100%;填充：0；保证金：0；}body{padding-left:100px;填充右：200px；}.left{背景：红色；宽度：100px；向左飘浮;margin-left:-100%;/*-100%:1.导致left超过body内容（此时body内容的宽度只有100%-200-100）移动到上层2：margin是根据父元素的Width，所以-100%到上半身内容的顶部*/position:relative;left:-100px;/*-100px超出正文内容左侧，到达窗口最左侧*/height:100%;}.main{返回g圆形：蓝色；宽度：100%；高度：100%；向左飘浮;}.right{背景：红色；宽度：200px；高度：100%；向左飘浮;为了超越正文内容，到达上一级正文内容的末尾*/position:relative;right:-200px;/*-200px是向右偏移，回到窗口的最右边*/}.container{width:500px;高度：200px;}问题：如果外层内容框的宽度太小无法容纳.left的宽度，那么.left仍然会保留在下层。padding，让contentbox等于padding-box，避免.left上移后需要设置left值移动到padding。HTML如下：mainleft对CSS如下：body,html{height:100%;填充：0；保证金：0；}body{/*padding-left:100px;*//*padding-right:200px;*/}.left{背景：红色;宽度：100px；向左飘浮;margin-left:-100%;/*-100%1：要超出body内容（此时body内容为100%）到最左边2：要到达body上层的最左边内容，这是窗口的最左边/*position:relative;*//*left:-100px;*/高度:100%;}.main{背景：蓝色；宽度：100%；高度：100%；向左飘浮;}.right{背景：红色；宽度：200px；高度：100%；：左边;margin-left:-200px;/*-200px1：就是超出body内容（此时body内容为100%）到最左边2：到达body的最上面的内容，也就是最右边窗口/*position:relative;*//*right:-200px;*/}.inner{margin-left:100px;右边距：200px；}和圣杯布局的区别已经用注释指出了，双飞翼问题和圣杯flexbox布局一样flexbox布局是最理想的解决方案。一方面，代码简洁易懂。另一方面，当宽度太小时，也可以拉伸它以避免重叠HTML如下：mainleftrightCSS如下：body,html{height:100%;填充：0；保证金：0；}body{显示：flex;弹性流：行现在换行；}.left{背景：红色；宽度：100px；高度：100%；订单：0；}.main{背景颜色：蓝色；弹性：1；高度：100%；顺序：1；}.right{背景：红色；宽度：200px；高度：100%；顺序：2；}

上一篇：electron-vue从入门到精通（一）

下一篇：颜色研究

三栏布局总结相关文章

最新推荐

猜你喜欢