html - CSS 表格布局中的 iframe

Question

我正在尝试将 YouTube 视频与一些文字并排播放。我的 HTML 如下 ( http://jsfiddle.net/N5j7L/ ):

<div style="width: 100%; display: table;">
    <div style="display: table-row">
        <div style="width: 600px; display: table-cell;">
            something</br>
            something</br>
            something</br>
            something</br>
            something</br>
            something</br>
        </div>
        <div style="display: table-cell;"> 
            <iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0" frameborder="0" allowfullscreen></iframe> 
        </div>
    </div>
</div>

我不明白为什么第一列比第二列低。我应该向 CSS 添加一些东西吗？没有 iframe 一切看起来都不错。

Answer 1

试试这个(为左列添加 vertical-align:top):

<div style="width: 100%; display: table;">
                        <div style="display: table-row">
                            <div style="width: 600px; display: table-cell; vertical-align:top;">
                                something<br/>
                                something<br/>
                                something<br/>
                                something<br/>
                                something<br/>
                                something<br/>
                            </div>
                            <div style="display: table-cell;"> 
                                <iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0"                 frameborder="0" allowfullscreen></iframe> 
                            </div>
                        </div>
                    </div>