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

最新推荐文章于 2022-02-24 20:24:02 发布
最新推荐文章于 2022-02-24 20:24:02 发布
阅读量1k 收藏
点赞数
分类专栏： CSS/CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012863664/article/details/54782551
版权

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


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

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

(1) 结构:

(2) 样式:

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


Encoreeeee
关注
专栏目录
#CSS：宽度等分 #CSS：宽度按比例划分 #float @FDDLC
LiuXingchang的博客
04-28 2245
问题：如何实现宽度等分？ 方法一：使用float <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ width:100%; height:300px; border:.
JavaScript面试题
qq_44417271的博客
04-06 6978
. 1.数据类型有哪几种, 检测方法是什么?? 基本数据类型 ​ ES5-------Number/Boolean/String/Undefined/Null ​ ES6新增—symbol 引用数据类型 ​ Object ​ 检测方法4种 1、Object.prototype.toString.call() **作用: 可以检测所有数据类型** **所有数据类型都可以检测,而且非常正确** 语法: Object.prototype.toString.call(
div里面包含3个按比例分割的div
qq351943923的博客
07-28 3272
只是收集几种方式供选用！ 子div没有float   子div一定要指定高度！否则会无效 （指定高度 float：左右都行） 但是假如没有指定父元素div的的高度 那么父元素也要float 这样才能跟着子元素最高元素有相同的高度 &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=g...
按照比例来设置列宽
小白
08-18 339
Flex里面，DataGrid的column的width属性不接受百分比，只接受一个具体的像素值，所以，如果想按照比例来设置列宽需要费些周折。 Google了一下，有两种方法可以做到： 第一种方法，不要设置width为百分比，而设置为一个小数，所有列的小数值的和必须为1。 &lt;mx:DataGrid width="100%" height="100%"&gt; &lt;mx...
div宽高按照特定比例显示内容padding-bottom
杨咩咩
03-06 588
使div的宽和高始终按照一定比例显示，定义好宽度，高度为0，然后使用padding-bottom Html内容： <div class="a"></div> style样式内容： .a{ overflow: hidden width: 100% height: 0 padding-bottom: 3...
CSS布局div高度宽度按百分比展示
weixin_45932733的博客
11-10 5777
在你写CSS样式时会不会遇到我的高度明明是写了百分比高度，不知道为什么就是撑不出来高度，因为你没有给你的父级元素设置高度。因为你写的百分比高度，是按照腹肌蒜素的高度去生成的，如果你父级元素的高度都不知道，你怎么按百分比分配呢？这个时候你就需要在你的所有父级元素上面都加上高度即可。 html，body { height: 100%; } 例子只给了html，和body元素的，其他高度自行定义即可 ...
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3228
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
前端面试题
wangbo
04-03 933
HTML CSS 锚点的作用什么？如何创建锚点？ 锚点是文档中某行的一个记号。类似于书签，用于链接到文档中的某个位置，当定义锚点后，我们可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无须不停地滚动页面来寻找他们需要的信息了。 在使用元素创建锚点时，需要使用name属性为其命名，代码如下 锚点1 <a href='#anchorname1'>回到锚点</a> 超级链接有哪些常见的变现形式？ 元素用于创建超链接，常见的表现形式有： 普通超链接，语法 <a hre
html如何设置div宽高比,使用css设置div等比例缩放高宽
weixin_31577599的博客
06-15 5806
2018-11-19 15:02:54在响应式开发中，有一些元素需要按等比例进行显示，比如说一个上传图片的区域，我们需要严格限制上传区域的比例为3:1，上传完成后的预览图宽高均为100%，才能保证用户上传后看到上传的图片是否合乎比例，是否在实际应用时会产生变形或裁剪的问题。那么此时就需要在适应不同宽度的屏幕中进行等比例缩放div区域。方案一：通过媒体查询，设定在不同屏幕宽度下div的高度和宽度，如...
JAVA 按比例分配
浮華落尽
06-04 3683
public static List<String> candy = new ArrayList<String>(); public static List<String> child1 = new ArrayList<String>(); public static List<String> child2 = new ArrayList<String>(); public st
Java实现百分比
08-03
NULL 博文链接：https://zhaoshijie.iteye.com/blog/798719
如何用纯css使div保存等比例缩放
张致豪
05-27 9688
当一个div盒子的宽度为百分比时，如何使盒子按等比例缩放？ 我开始的想法是获取盒子宽度，然后将盒子宽度按比例计算得到高度，这样盒子就可以等比例缩放了。 但是遇到一个问题，盒子宽度为百分比，我们不能直接获取到盒子宽度，如果用js去获取盒子宽度又太麻烦，最后发现了css的padding属性。 padding属性的百分比都是基于父元素的width值。 /* 基于父元素的width */ padding...
Div里CSS控制图片按比例扩大缩小不变形
热门推荐
ljw_Josie的博客
07-24 1万+
一般来说，我们设定一定宽度高度的div标签，在里面放上图片，只有当图片大小尺寸符合这个宽度和高度的时候显示最佳。那有的时候不同的界面，同样的信息（比如头像）放大的尺寸是不一样，怎么才能让图片根据DIV的宽高度进行，缩放呢？其实很简单，只用设置其css样式即可。     .photo img                  {         max-width:80px;//这是DIV的大
div元素按比例缩放的实现方法
iteye_16353的博客
09-08 9695
[align=center][size=large]div元素按比例缩放的实现方法[/size][/align] 某些场景下，窗口宽度缩放时，使得元素宽度自适应的同时，保证每个元素的宽高比例不变。 [b]1.1利用CSS属性实现——padding-bottom属性[/b] padding-bottom 有一个特性是当它的值是百分比形式时，百分比的基数是其所在元...
图片根据DIV大小等比例缩放
a464064368的博客
12-07 1万+
CSS: img{ max-width: 100%;     max-height: 100%; }
比例分成算法--java
u012045045的博客
09-04 6014
关于业绩分配，常常会出现几家公司或者几个人合作的情况，那么合作之后创造出来的业绩价值如何分配的呢？有可能是1:1或者3:7.或者是3:3:4等等。那么我们针对这种情况就设计出来了一套比例分成系统。 代码如下所示： 主代码： package com.handler.mark.cardperformance; import com.alibaba.fastjson.JSON; import ...
java 比例 分配_JAVA 按比例分配
weixin_33350741的博客
02-16 2895
package com.ysd.controller;import java.util.ArrayList;import java.util.List;public class Aa {//这里是测试数据可动态获取public static List candy = new ArrayList();// child1 :child2 :child3 ===== 2：3：5public ...
Java企业面试必备：CSS+JavaScript面试题解析
"该资源是一份集合了Java企业面试题目的资料，涵盖了多...这份Java企业面试题资源不仅包含CSS和JavaScript的基础知识，还强调了CSS在网页设计中的重要性和使用CSS+DIV布局的优点，对准备面试的Java开发者来说非常有益。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值