Div position shifts when adding content

a 夏天 提交于 2019-12-04 11:35:42

Add vertical-align: top to these div's:

.rowSample > div {
    background: none repeat scroll 0 0 black;
    border: 1px solid yellow;
    color: white;
    display: inline-block;
    height: 50px;
    vertical-align: top;
    width: 50px;
}

Because these are elements with display:inline-block they are aligned as inline elements but have explicit dimensions. For example, <img> tags by default have inline-block display mode, so to align them inside text you have to specify a desired vertical-align property.

Please take a look at the example fiddle: http://jsfiddle.net/a6Hu2/

I agree with @Keaukraine, you need to add a

vertical-align:top;

However, you are also going to need some specific code to get this working on Internet Explorer 7 (which in 2012 is still a major browser).

/* For IE 7 */
zoom: 1;
*display: inline;

See this article for details: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!