Question

我正在开发一个网站，但我很难理解为什么会发生这种情况：

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到顶部而不是默认的底部。

Answer 1

将vertical-align:top;添加到div#col1

working demo

div#col1 {
 display: inline-block;
 width: 510px;
 border:1px solid red;
 vertical-align:top;
}

Answer 2

将您的父级 font-size:0;和子级定义 font-size:12px;定义为您的设计依赖

习惯了这个

      div#content {
               font-size:0;
        }

        div#col1 {
    display: inline-block;
vertical-align:top;
            font-size:12px;
        }

        div#col2 {
    display: inline-block;
vertical-align:top;
                font-size:12px;
        }

现场演示 http://jsfiddle.net/jjY64/2/

显示屏上方的空白区域：内联块div

2 个答案: