为什么两个子盒无法横向排列？
以下 html 和 css 代码中，两个子盒子 box1 和 box2 预期应该横向排列，但实际却没有：
<div class="contAIner"> <div class="box1"></div> <div class="box2"></div> </div>
登录后复制
* { box-sizing: border-box; padding: 0; margin: 0; } .container { height: 300px; width: 500px; } .box1 { display: inline-flex; width: 50%; height: 100%; background-color: #87CEFA; } .box2 { display: inline-flex; height: 100%; width: 50%; background-color: #FFC0CB; }
登录后复制
这是因为给子盒子设置了 inline-flex 的 display 属性。inline-flex 属性使得子盒子作为行内元素在父容器中排列，而行内元素之间默认会有 1em/4 的间隙。因此，两个 50% 宽度的子盒子无法在父容器中横向排列。
要解决这个问题，可以将父元素的 display 属性修改为 flex，然后将子盒子的 display 属性修改为 block 或 flex。这样，子盒子将作为块级元素或弹性盒模型元素进行排列，并且可以按照预期横向排列。
立即学习“前端免费学习笔记（深入）”；
© 版权声明
文章版权归作者所有，未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容