html - 两个 div 并排设置为显示 : table-cell, 但第二列中的文本正在下拉

Question

我有一个布局，其中有一个包装 div 和两个子 div。

父 div 设置为 display: table，子 div 设置为 display: table-cell。

我已将第一个 table-cell div 设置为 width: 35%。

它在 Chrome 中运行良好，但在 IE10(或更低版本)中显示时，文本显示在图像下方，或者出现大量填充。

这是表格的 HTML:

<!-- Display: table div -->
<div class="about_us_row_content_wrapper boxsizing">
                            <!-- Table cell 1 with width 35% -->
                <div class="about_us_column about_us_image">
                    <img src="<?php echo $link_path . 'images/aboutus/all_devices.png'; ?>" alt="Works on all devices, such as tablets, mobiles and desktops" />
                </div>
                            <!-- Table cell 2 with assumed auto width, but text is dropping down-->
                <div class="about_us_column">
                    <h3 class="opensans_thin about_us_section_header">Polls Everywhere, No compromises</h3>
                    <p class="about_us_section_paragraph">We worked hard so that you can make and take polls anywhere, anytime - no matter which device you're using.</p>
                    <p class="about_us_section_paragraph">Our fully featured poll maker works perfectly on phones, tablets and traditional desktops.</p>
                </div>
            </div>

这是 CSS 的关键部分:

div.about_us_row_content_wrapper { display: table; max-width: 990px; text-align: left; }
.boxsizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
div.about_us_row_content_wrapper img { vertical-align: top; } 
div.about_us_column { display: table-cell; }
div.about_us_image { margin-left: 50px; width: 35%; }
h3.about_us_section_header { margin: 0 0 24px 0; vertical-align: top; font-size: 1.5em; }
p.about_us_section_paragraph { vertical-align: top; }

我尝试将 vertical-align: top; 添加到单元格内的所有文本，但这不起作用。

我也曾尝试将 width: 50% 添加到两个单元格中，看看这是否为文本提供了足够的空间向上上升，但事实并非如此。

表格单元格元素上也没有 min-height 或填充，所以我不确定它是从哪里获取的。

代码已上线Here

在 Chrome 中运行良好:

在 IE10 中它没有按预期工作:

Answer 1

你需要给顶部垂直对齐:- 将它应用到你所有的右列

.about_us_column{
    vertical-align: top;
}