inline-block 布局遇到的问题
对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以设置宽高)。
思路:像文本一样去排列 block 元素,没有清除浮动等问题。
存在的问题:需要处理间隙。代码举例如下:
上面的代码,存在两个问题。
问题一:如果设置div2
的宽度为 200px 之后,div2
掉下来。
问题二:div1
和div2
设置为 inline-block之后,这两个盒子之间存在了间隙。 这是因为,此时的 div1
和div2
已经被当成文本了。文本和文本之间,本身就会存在间隙。
间隙的几种解决办法:
办法1:设置父元素container
的字体大小为0,即font-size: 0
,然后设置子元素 div1
、div2
的字体font-size: 12px
。
办法2:在写法上,去掉div1
和div2
之间的换行。改为:
<div class="div1">div1的inline-block 属性</div><div class="div2">div2的inline-block 属性</div>
注意, 因为是文字, 所以不能添加空格