作者：手浪用户2602884673 | 来源：互联网 | 2023-02-12 11:44
我想知道HTML或CSS中是否存在某种权重属性(或者至少是一种解决方法).
我不是指字体重量.我的意思是元素可以拉伸到的大小.
在这个例子中,第一个div应该占宽度或高度的1/3(取决于包装器的显示属性及其内容的方向),因为包装器中元素的权重之和为3,div的权重为1.因此第二个div应占空间的2/3(重量= 2).
这将是一个很好的方法来设置包装器中元素的宽度,如果一个宽度相对于其他的宽度,如果它们的数量是动态的.
这样的事情是存在的,还是我需要使用JS呢？
1> andreas..：
您可以尝试display: flex;包装器和flex子项上的属性.它应该像你描述"重量"一样工作.
flex:
相当于flex: 1 0px.它使弹性项目具有灵活性,并将弹性基础设置为零,从而生成一个接收指定比例的剩余空间的项目.
如果Flex容器中的所有项目都使用此模式,则它们的大小将与指定的flex因子成比例.
- 关于CSS的技巧flex
.wrapper {
display: flex;
}
.wrapper div {
border: 1px solid black;
}
.wrapper div:first-child {
flex: 1;
}
.wrapper div:nth-child(2) {
flex: 2;
}
推荐阅读
-
Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ...
[详细]
蜡笔小新 2023-10-09 19:41:30
-
本文介绍了一种图片处理应用，通过固定容器来实现缩略图的功能。该方法可以实现等比例缩略、扩容填充和裁剪等操作。详细的实现步骤和代码示例在正文中给出。 ...
[详细]
蜡笔小新 2023-12-10 18:52:53
-
-
我今年4月投递了腾讯前端开发岗位，很可惜笔试题没通过，48小时内给出答案回复面试官，我的答案太过于简单，所以后面面试官估计也就懒得回我这个菜鸡来（嘤嘤嘤）。当然以我现在的眼光来重新 ...
[详细]
蜡笔小新 2023-10-11 18:29:45
-
一款清新的jQuery日历插件带日期的Tooltip提示543人浏览发表回复这是一款非常简单清新的jQuery日历插件，它并没有特别的日期或者时间选择功能，仅仅是展示一个简单的日历控件。这款jQu ...
[详细]
蜡笔小新 2023-10-11 16:29:28
-
css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ...
[详细]
蜡笔小新 2023-10-11 12:41:15
-
这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读 ...
[详细]
蜡笔小新 2023-10-11 05:24:06
-
html5与js, 本文介绍html5shiv.js和respond.min.js与大家分享，如下： 做 ...
[详细]
蜡笔小新 2023-10-10 21:16:41
-
web前端|js教程node.js,html5,html,css,javascriptweb前端-js教程本篇文章给大家带来的内容是关于js中运行机制的详细分析（示例解析），有一定 ...
[详细]
蜡笔小新 2023-09-24 19:54:19
-
本文主要介绍关于html5,css3的知识点，对【关于雾霾网站设计】和【你有什么见解】有兴趣的朋友可以看下由【-你在暮色中】投稿的技术文章，希望该技术和经验能帮到你解决你所遇的【】相关技术问题。你有 ...
[详细]
蜡笔小新 2023-09-24 13:40:19
-
故事背景：这几天碰到一个客户，是做集会记录的，每次集会过程当中，都邑有特定装备记录下发言人的位置以角度值显现。他给我角度值，让我给他做一个图表来展现每一个人的一个或许位置。客户想到 ...
[详细]
蜡笔小新 2023-09-24 08:39:56
-
有一天，我们组内的一个小伙伴突然问我，你知道有一个叫重构工程师的岗位？这是干什么的？重构工程师这个问题引发了我对前端领域发展的思考，所以我来梳理下前端领域的发展过程，顺便小小的预测 ...
[详细]
蜡笔小新 2023-09-18 22:44:23
-
媒介关于手机不离手的当今社会，挪动端页面开辟已成了一样平常便饭，怎样让手机页面开辟起来更费心是一个前端工程师必不可少的妙技。adaptive.js由本人自创手淘计划编写的异常玲珑的 ...
[详细]
蜡笔小新 2023-09-18 19:41:24
-
html5中template用法,html5标签 一、HTML5template元素初面 模板元素，基本上可以确定 ...
[详细]
蜡笔小新 2023-10-13 16:16:46
-
这篇文章给大家分享的是有关html5指的是什么语言的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。html5是一种标记语 ...
[详细]
蜡笔小新 2023-09-18 19:02:50
-
1、给边框加上圆角及阴影，如下代码：<!DOCTYPEhtmlPUBLIC"-W3CDTDHTML4.01TransitionalEN"" ...
[详细]
蜡笔小新 2023-09-17 19:38:46
-
手浪用户2602884673
这个家伙很懒，什么也没留下！
京公网安备 11010802041100号