2

我正在尝试在包含 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;    
    }
4

2 回答 2

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;
}
于 2013-08-22T16:08:14.883 回答
0

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

于 2013-08-22T16:05:18.160 回答