一道关于给DIV按比例分配宽度的面试题

来源：互联网发布：温度数据采集程序编辑：程序博客网时间：2024/05/16 17:52

之前参加某公司的笔试的时候有这么一道题, 要求用CSS3的方式实现下列布局:

可以看得出来这里没有标明任何的宽度是多少, 但有一个值得注意的地方是蓝色块的宽度很明显是红色块宽度的两倍.

当时做这个题是还没有学习CSS3, 所以并不知道怎么做. 而经过最近的学习之后, 了解到了其实可以使用CSS3中的弹性伸缩布局来做, 具体的做法是:

(1) 结构:

(2) 样式:

只需要这么几行简单的代码就可以实现了, 代码具体的含义是: 给#box设置为flex布局, 然后给p1, p2, p3设置以父元素的宽度按照比例为1:1:2的方式分配宽度, 也就是p1和p2宽度为150px, p3的宽度为300px. 而且即便改变了box的宽度之后, p1, p2, p3的宽度比例还是一样, 如果要用传统的css1或css2要实现这种效果就稍显麻烦, 还要涉及计算.

0 0