html - 第二个内联 block div 上方的空白

Question

我确定我在这里忽略了一些东西但无法解决。我的第二个内联 block div 上方有空白，只有当右侧 div 中的“此处文本”长度小于左侧时才会出现这种情况。

jsFiddle:http://jsfiddle.net/B2S4r/2/ (您需要使 HTML View 变宽才能看到它们并排显示)

<div style="border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;">

    <div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;">
        <div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;">
        </div>

        <span class="main_header" style="font-size: 21px; margin: 0;">Title</span>
        <br />
        Subtitle

    </div>

    <div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;">
    Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here 
    </div>
</div>

<div style="border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;">

    <div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;">
        <div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;">
        </div>

        <span class="main_header" style="font-size: 21px; margin: 0;">Title</span>
        <br />
        Subtitle

    </div>

    <div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;">
    Text here Text here Text here Text here Text here Text here Text here Text here Text 
    </div>
</div>​

Answer 1

vertical-align 的默认值为 baseline，当应用于不同高度的 block 时，它通常是不需要的。

应用 top 的值将解决您的问题。这是一个工作 fiddle :http://jsfiddle.net/PhilippeVay/B2S4r/3/ (因为你的 fiddle 里没有样式表，只有内联 CSS，所以我什至不会尝试找到如何瞄准右边的那个)