CSS/两栏并列等高布局

macg0406 发布于2019-08-28 17:56 / 568人阅读

摘要：刚好，两栏并列等高布局就出来了具体的实践过程中可以把和的值设大一些，要保证任意两栏的高度差不小于你设置的值。至此，总算把实现两栏等高布局的原理弄懂了。这说明不要轻易看别人的简历血的教训啊地址两栏并列等高布局实验

实习的时候在老大那里偶然看到了前端的面试题，于是顺手拿过来做了一做。发现题目也不是很难，于是做完了便沾沾自喜的看别人的简历。
这时，XX哥跟我说，干嘛看别人简历啊？我说题目看完了。然后他就问我题目会不会。我说都会，他就抽出里面的一道题来问我。这个布局（指的是两栏等高布局）怎么写。当时我以为只是浮动过去而已，于是没多想就说这不就是浮动嘛。
然后他问，那怎么等高呢？我当时就混乱了，原来这题是在考浮动等高！我从来没有碰到过这样的布局，在最近的一个项目中我也是通过父元素加背景模拟两边等高，至于如何做到真正的两栏并列等高，我还不知道。于是他跟我说让我去网上搜一搜。这样的布局非常经典，一下就搜出来了：

给两个元素用padding来填充，然后用margin来消除padding带来的影响，最后给父元素加一个overflow:hidden;就行了。

我相信大家一定看了之后都会用。但作为一个专业的前端工程师，我们必须弄明白为什么这样做是可以的呀！我捉摸的许久，在想这样的方法为什么可行。我在 CodePen 中做了如下实验：

1.设margin-bottom:-100px; padding-bottom:100px;设置一个较小的值有利于之后直观的看出这两个属性是如何影响布局的；
2.把父元素的overflow:hidden;去掉。

在我做了这两个事情之后，我发现两个元素的下部padding完全显示出来了，也就是说它们的padding值其实是一样的，只是由于超出父元素被截断了，造成了它们等高的情况。那父元素怎么就恰好在最高的元素的底部截断让两栏等高的呢？我又执行了以下操作：

1.把父元素的overflow:hidden;加上。
2.把最高的（试验中为内容最多）的元素的margin-bottom:-100px;变为margin-bottom:-140px;

这时我发现父元素高度减小了。减小了40px！由此我们可以推测未定高父元素的高度是这么计算的：最高的内容的高度！那父元素的里面都是浮动元素，高度怎么计算呢？这里由于父元素用了overflow:hidden;触发了bfc或者haslayout，所以浮动元素的高度也应该被计算，同时，也把超出父元素的那一部分截掉了。刚好，两栏并列等高布局就出来了！
具体的实践过程中可以把margin-bottom和padding-bottom的值设大一些，要保证任意两栏的高度差不小于你设置的值。
至此，总算把实现两栏等高布局的原理弄懂了。花了不少时间，死了不少脑细胞。这说明不要轻易看别人的简历！血的教训啊！！！
CodePen地址：两栏并列等高布局实验

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

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

深入理解css盒子模型

摘要：下面我们就一步一步揭开的神秘面纱，深入理解盒模型，这对我们在布局上会有一个质的提升。与内联元素的百分比值与内联元素。 css是一门具象语言，并不像js那样具有逻辑性，因此，就算入行了前端很久的工程师，也觉得css难以掌握。下面我们就一步一步揭开css的神秘面纱，深入理解css盒模型，这对我们在布局上会有一个质的提升。盒子模型 showImg(https://segmentfault....

gplane 2019-08-29 15:14 评论0 收藏0
CSS入门指南-4：页面布局

摘要：属性是中最重要的用于控制布局的属性。布局的高度多数情况下，布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...

ethernet 2019-08-02 15:57 评论0 收藏0
CSS入门指南-4：页面布局

摘要：属性是中最重要的用于控制布局的属性。布局的高度多数情况下，布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...

Stardustsky 2019-08-29 13:08 评论0 收藏0
css布局：多列等高布局

摘要：多列等高布局是在一个容器里面，并排的多列，如果内容的高度无法在一开始确定例如内容是动态的，又需要让各列自然地撑开不出现每列里面的滚动条，这时候需要用或者的方法把各列高度设置为最高列的高度。多列等高布局是在一个容器里面，并排的多列，如果内容的高度无法在一开始确定（例如内容是动态的），又需要让各列自然地撑开（不出现每列里面的滚动条），这时候需要用css或者js的方法把各列高度设置为最高列...

Ethan815 2019-08-29 15:05 评论0 收藏0
七种实现左侧固定，右侧自适应两栏布局的方法

摘要：总结一下左边固定，右边自适应的两栏布局的七种方法。基本的样式是，两个相距左侧宽基本的样式是，两个盒子相距左侧盒子宽，右侧盒子宽度自适应。没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。总结一下左边固定，右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法，也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用，但是其中也会涉及...

luffyZh 2019-08-29 13:11 评论0 收藏0