<分区>
我正在开发一个网站，但我很难理解为什么会发生这种情况:
http://i.imgur.com/DABPnlM.png
这是内容 div 的 html:
<div id="content" style="display: block;">
<div id="col1">
<h1>Prosperity Construtora E Incorporadora</h1>
<p>[...] text [...]</p>
<p>[...] text [...]</p>
</div>
<div id="col2">
<h1>Empregos na Prosperity</h1>
<p>[...] text [...]</p>
<h1>Fotos de trabalhos realizados</h1>
<p>[...] text [...]</p>
</div>
这是由谷歌浏览器计算的 css(相关的 css):
div#content {
height: auto;
margin: 15px auto 0 auto;
width: 800px;
text-align: left;
padding-bottom: 23px;
}
div#col1 {
display: inline-block;
width: 510px;
}
div#col2 {
display: inline-block;
width: 260px;
}
我注意到，如果我删除段落中的一些文本，空间会增加/减少，如果我稍微移动 div(通过改变它们的宽度)，我会移动空间。如果我使 col1 足够小，col2 将在其上方有间距..
有什么想法吗？
编辑:jsfiddle 也这样做:http://jsfiddle.net/jjY64/
解决方案
正如 NoobEditor 指出的那样，我所要做的就是将 col1 垂直对齐到顶部而不是默认的底部。