去T3出行面试前端问css:父元素里放二个子元素的布局方式有哪些

100人浏览 2024-12-12 08:04:19

先看下问题的截图：

大家可以先想一想

下面是我总结的方法：

方法一：子元素浮动float:left；（考虑脱离文档流后后面元素不易控制，故不首选）

方法二：子元素：display: inline-block; --->会有空隙

原因：因为行内元素或者行内块元素换行后之间会有一个间隙只要换行会有5px的间距--->解决 : 文本不换行

问题：
https://blog.csdn.net/qq_39189819/article/details/90813184

原理

行内元素和行内块元素换行后之间会有一个间隙

方法三：子元素写display: inline-block; 给父元素写font-size:0; 把所有间距都去了

方法四：弹性盒子是 CSS3 的一种新的布局模式，给父元素加display:flex;是标准文档流---可以高效的布局 IE10以下不支持

相关推荐