第二个内联块div上方的空白区域

Question

我确定我在这里忽略了一些东西,但无法解决这个问题.我的第二个内联块div上面有空白区域,这只有在右侧div中的"text here"长度小于左侧时才会出现.

jsFiddle:http://jsfiddle.net/B2S4r/2/(你需要让HTML视图更宽,以便彼此一起看到它们)

<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,当应用于不同高度的块,它往往是不必要的.

应用值top将解决您的问题.这是一个工作小提琴:http://jsfiddle.net/PhilippeVay/B2S4r/3/(因为你的小提琴中没有样式表,但只有内联CSS,我甚至不会试图找到如何瞄准右边的那个)