一切正常,除非更改我的p标签字体大小,它会使内联块无效并且元素不再并排..任何想法为什么会这样?
HTML
<section>
<div class="first">
<p>hello this is some text</p>
<p>and here is some more text</p>
<div class="ipad"></div>
</div>
</section>
CSS:
.first p {
display: inline-block;
}
.ipad {
background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/IPad_3.png/220px-IPad_3.png) no-repeat;
display: inline-block;
border: 1px solid #333;
height:100px;
width:100px;
}
section p {
margin: 0;
padding: 1em 0;
font-size: 1.8em;
line-height: 1.5;
}
答案 0 :(得分:3)
在一个容器中,两个内联块彼此相邻,这两个容器对于两者都不够宽,所以它们是包装的。这是内联块的预期。让你的浏览器足够宽大,它们很合适。