css中加左浮动会显示在中间,使用显示的优点:内联块VS浮动:左在CSS使用显示的优点:内联块VS浮动:左在CSS(Advanta...

在3个词语: inline-block更好。

直插块

到唯一的缺点display: inline-block的方法是,在IE7和一个元件的下方只能显示inline-block ,如果它是已经inline默认。 这意味着,与其使用

元素,你必须使用一个 元素。 这不是一个真正的巨大的缺点,因为在所有语义一个
是将页面而 仅仅是覆盖页的跨度,所以没有一个巨大的语义差别。 的一个巨大的好处display:inline-block是,当其他开发商可以在以后维护你的代码,它是更明显的是什么display:inline-block和text-align:right上,努力实现比float:left或float:right说法。 我最喜欢的好处inline-block方法是很容易使用vertical-align: middle , line-height和text-align: center完美居中的元素,在某种程度上这是直观的。 我发现如何实现跨浏览器的inline-block的一个伟大的博客文章,在Mozilla的博客 。 下面是浏览器的兼容性 。

浮动

,使用的原因float方法不适合你的页面的布局是因为float CSS属性,本来只是打算有大约图像(杂志风格)文本换行 ,并在设计上没有最适合于一般的页面布局的目的。 当后续变化浮动的元素,有时你也会有定位问题,因为他们是不是在页面流 。 另一个缺点是,它通常需要一个clearfix否则会破坏页面的各个方面。 所述clearfix需要添加的元素的浮动元素之后停止其塌陷父他们周围从内容分离交叉样式之间的语义线,并因此在网络开发的反模式 。

在链接上面提到的任何空白问题,可以很容易地固定与white-space CSS属性。

编辑:

SitePoint是网页设计的建议非常可靠的消息来源,他们似乎有我做同样的看法:

如果你是新来的CSS布局,你会误以为使用CSS在富有想象力的方式漂浮是技能的高度。 如果你已经消耗尽可能多的CSS布局教程,你可以找到,你可能认为掌握彩车是的成年礼。 你会用别出心裁,由复杂震惊眼花缭乱,你会获得一种成就感,当你终于明白如何浮工作。

不要被愚弄。 你被洗脑。

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

2015年更新- Flexbox将是一个不错的选择现代浏览器 :

.container {

display: flex; /* or inline-flex */

}

.item {

flex: none | [ ? || ]

}

更多信息

2016年12月21日更新

引导4去除支持IE9,并由此从行是摆脱花车和去充分Flexbox的。

拉请求#21389

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值