推广 热搜: 广场  Java  app  Word  营业  微信公众号  北京代理记账  商城  代理记账  商标交易 

如何设置横向div的宽度占比 html怎么做横着的目录?

   2023-05-07 企业服务招财猫100
核心提示:浮浮,唐不要忘记父元素应该清除浮动。在最近的一次面试中,面试官问,在水平布局中,假设有三个div,每个都有固定的宽度apx。如果想让两边的宽度都是x,那么中间div的间隔就是2x。x可以是自适应的。怎

浮浮,唐不要忘记父元素应该清除浮动。

在最近的一次面试中,面试官问,在水平布局中,假设有三个div,每个都有固定的宽度apx。如果想让两边的宽度都是x,那么中间div的间隔就是2x。x可以是自适应的。

怎么做很简单,就两行代码:

justify-content的常见属性有:flex-start|flex-end|center|space-between|space-around。

前三个按字面意义对齐到行首、行尾和行中间。

在最后两个示例中,space-between:元素将均匀分布在行中。如果最左边的剩余空格为负,或者该行只有一个子元素,则该值等效于#39flex-start#39。在其他情况下,第一个元素的边界与该行的主起始位置的边界对齐,而最后一个元素的边界与该行的主结束位置的边距对齐,而剩余的扩展框项均匀分布,并确保它们之间的空白空间相等。白话的意思是第一个元素的位置与该行的起始位置对齐,最后一个元素与该行的结束位置对齐,中间剩余的空间均匀分布。

Space-around:弹性盒元素将在行中均匀分布,两端将在子元素之间保留一半的空间。如果最左边的剩余空间为负,或者该行中只有一个扩展框项目,则该值等效于#39center#39。其他情况下,扩展框项均匀分布,保证每对之间的空格相等,第一个元素前的空格和最后一个元素后的空格是其他空格的一半。

说到这个,it都是废话,这也是你最初学习flexlayout会接触到的。主要是面试官问,如果中间不是2x,那就是x,也就是每个缺口和两边的区间一样。那个it::

起初,我想在两边设置填充,并在中间使用空格,但在不同屏幕上看到的两边的填充值肯定是不同的,所以我不我不想等待双方的差距。。。所以我没有Idon'我最后也想不通。回来后发现justify-content居然还有space-even这样的属性!为什么使用这个属性是不言而喻的。均匀排列各元素,各元素之间的间隔相等。问题解决了。然而,空间均匀的兼容性仍然比通常使用的justify-content值差得多。

我们可以不要只是见面解决面试。问题,实际情况中可能会出现很多奇妙的情况,比如,四个x上图中的s改为三个xs和one2x(虽然我没见过这么奇妙的设计。。)那么我该怎么办呢?

这里我想到了css3的cacl(),可以计算百分比和px值,而且是强批。例如,要达到上述要求:

也能取得成果。(假设a的值是100px)并且无论什么情况都可以计算出你想要的大小。It这不太好。

 
反对 0举报 0 收藏 0 打赏 0评论 0
 
更多>同类资讯
推荐图文
推荐资讯
点击排行
合作伙伴
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  冀ICP备2023006999号-8