广告区

广告区


本站消息

站长简介/公众号


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

用 vw 创建两个元素来创建 100vw 不起作用[重复]

发布于2022-06-29 22:29     阅读(606)     评论(0)     点赞(27)     收藏(5)




我正在尝试创建 2 个简单的 div,一个80vw和另一个20vw并排创建两个 div。

由于某种原因,这不起作用:

<div style="background:black; height:100vh; width:50vw; display:inline-block;">50vw</div>
<div style="background:red; height:100vh; width:50vw;display:inline-block;">50vw</div>

小提琴:https ://jsfiddle.net/4hvrz4o1/


解决方案


切换到 flexbox 模型

 <div style="display:flex">
     <div style="background:black; height:100vh; width:50vw; display:inline-block;">50vw</div>
     <div style="background:red; height:100vh; width:50vw;display:inline-block;">50vw</div>
 </div>  

最初的浏览器布局疯狂有一个方法,你只需要记住它。就个人而言,我发现 flexbox 模型更符合我对布局的“思维方式”,因此我更频繁地使用它。这是常见用例的备忘单,尤其是。并排的情况。


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)
关注公众号:程序员总部,回复前端,免费领取 全套前端视频教程,关注公众号回复前端充值+你的账号,免费为您充值1000积分






所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/377128/76b7e7d9a6be3a33746f/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

27 0
收藏该文
已收藏

评论内容:(最多支持255个字符)