【笔试题】阿里前端笔试题---两列布局，不需要自适应

最新推荐文章于 2024-09-09 15:01:35 发布

My-Lady

最新推荐文章于 2024-09-09 15:01:35 发布

阅读量351

点赞数

CC 4.0 BY-SA版权

分类专栏：前端笔试题集锦 CSS 文章标签：两列式布局阿里前端笔试

本文链接：https://blog.youkuaiyun.com/heshan1992/article/details/77524699

前端笔试题集锦同时被 2 个专栏收录

11 篇文章

订阅专栏

CSS

11 篇文章

订阅专栏

本文介绍了几种实现两栏式布局的方法，包括利用BFC、float、inline-block以及flex布局等技术手段，并探讨了如何避免父元素塌陷的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天不知道因为网速的原因还是怎么会回事，该题的图片没有显示，但是感觉是要实现两栏式布局，不要求自适应，应该利用BFC的知识就好了，只要两个子元素分别形成BFC即可。
形成BFC的方式：
（1）float：Left、right
（2）position: absolute、fixed
（3）display：inline-block、table-caption、inline-table
（4）overflow：hidden
只要两个元素利用如上的方式分别形成BFC则可以实现两栏式布局
如利用inline-block以及float 实现效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列式布局</title>
    <style type="text/css">
        .container{

        }
        .left{
      /*      float:left;*/
            width:100px;
            height:100px;
            background: red;
            display:inline-block;
        }
        .right{
            float:left;
            width:100px;
            height:100px;
            background: blue;
        }
    </style>
</head>
<body>
  <div class="container">
      <div class="left"></div>
      <div class="right"></div>
  </div>
</body>
</html>

效果图

同理可以同时使用float实现上面的效果（蓝色的box和红色的box的位置会不一样），但是就是这样将会导致父元素的塌陷，即父元素没有高度，解决办法是清除浮动或者是使父元素也形成BFC，给父元素添加某一属性。

当然之前提到的多栏式布局的方式也适用于此，利用flex的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列式布局</title>
    <style type="text/css">
        .container{
          display :flex
        }
        .left{
            width:100px;
            height:100px;
            background: red;
        }
        .right{
            width:100px;
            height:100px;
            background: blue;
        }
    </style>
</head>
<body>
  <div class="container">
      <div class="left"></div>
      <div class="right"></div>
  </div>
</body>
</html>

效果图

感觉这题主要是在考察BFC，但是因为图片没有看到，所以很多都是猜测的。。。。。
在实现多栏式布局时在没有严格要求的情况下，除了这种方式以外还可以考虑利用BFC来实现效果。同时如果是定宽的也可以考虑CSS3的多列布局的方式：
{
column-count
column-rule
column-gap
}