css - 在包含的 div 中顶部对齐动态高度的 2 个 div

Question

我试图在包含的 div 中顶部对齐两个子 div。子 div 包含不同的内容，并且可能具有不同的高度。有没有办法让两个子 div 顶部对齐？

这里有一个 fiddle 来说明问题 - http://jsfiddle.net/billafy/Rhj36/3/

HTML

<div class="headerStuff">
    Header
</div>
<div class="sectionArea">
    <div class="leftPanel">
        <div><img src="http://placekitten.com/50/50" alt="some image1" /></div>
        <div><button>test</button></div>
    </div>
    <div class="rightPanel">
        <div><img src="http://placekitten.com/50/50" alt="some image2" /></div>
        <div>
            <span>Some other text</span>
            <div>
                <span>And some additional content</span>
            </div>
        </div>
    </div>
</div>
<div class="footerStuff">
    Footer
</div>

CSS

    .headerStuff {
        font-size: 20pt;
        background-color: purple;
        border: 1px solid lime;    
    }
    .sectionArea {
        width: 100%; 
        display: inline-block; 
        height: 370px; 
        text-align: center; 
        vertical-align: middle;
        border: 1px solid lime;
    }
    .leftPanel {
        display:inherit; 
        border: 1px solid orange;
    }
    .rightPanel {
        display:inherit; 
        border: 1px solid blue;
    }
    .footerStuff {
        font-size: 20pt;
        background-color: red;
        border: 1px solid lime;    
    }

Answer 1

对两个面板使用 vertical-align: top;。

CSS:

.leftPanel {
    display:inherit; 
    border: 1px solid orange;
    vertical-align: top;
}
.rightPanel {
    display:inherit; 
    border: 1px solid blue;
    vertical-align: top;
}