Question

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

这是一个解释问题的小提琴 - 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;
}

Answer 2

您可以在左右面板中使用vertical-align:text-top;。

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

2 个答案: