三种自动截取不定宽容器的办法

是否有些时候,float布局下,IE9右侧多出一块?本文有介绍解决方案。

很多时候,我们需要对一个盒模型居中/靠右,需要根据盒子内的内容的宽度,而限定父亲容器的宽度。我们可以容易查到,下面有三种方法都可以支持。

  1. flexbox(该方法不支持IE9)
  2. float
  3. display: inline-block

    float

居中

1
2
3
4
5
<div>
<div id="父元素" style="float: right; margin: 0 auto;">
<span>我是子元素,宽度不定</span>
</div>
</div>

float: right是为了将父元素的宽度和子元素一样,margin: 0 auto是为了让父容器居中

margin: auto居中方式必须是当前盒模型定宽

靠右(某些弹窗底部的按钮)

1
2
3
4
5
<div>
<div style="float: right;">
<button>Cancel</button>
</div>
</div>

上面这种写法,页面上渲染,没有什么问题,但是,很多时候,我们是需要对弹窗样式做处理的

1
2
3
4
5
<div>
<div style="float: right;">
<button style="padding: 5px 10px;">Cancel</button>
</div>
</div>

代码上看不出任何任务,但是在IE9下,会发现右侧会多出一块内容,很有可能是padding导致,但是IE9的CSS BUG一般都很神奇,这里没有深究

但是可以使用inline-block来解决这个问题

display: inline-block

  1. 这个属性在移动端布局用的比较多,是可以完全代替float使用的
  2. 居中方式:在父容器设置 text-alignleft(默认)、center、right
1
2
3
4
5
<div style="text-align: right;">
<div style="display: inline-block;">
<button>Cancel</button>
</div>
</div>

display: inline-block是为了将父元素的宽度和子元素一样

使用inline-block时需要注意一个问题

1
2
3
4
5
<div>
<div style="display: inline-block;"></div>
<div style="display: inline-block;"></div>
<div style="display: inline-block;"></div>
</div>

这三个子元素div会横向排布,但是相互之间会多出一个空格的距离(由于换行加上了 )
通用解决方案:

  1. 讲三个子元素的font-size定好,并且把父元素的font-size改为0
  2. 讲这三个子元素头尾挨着写,不换行(不是很建议)