html - Div不会对齐

Question

我试图将 3 个 div 对齐到完全相同的高度。最右边的两个完全相同的很好，但左边的大的一直在它们上面。

我已经考虑到两个较小的 div 的边框宽度为 2px，但这并没有改变任何东西。

我什至将容器 div 设置为元素的确切高度，但它们仍然没有垂直对齐:

<div id='section_4_row_1'>
        <div id='double_wide_image'></div>
        <div class='section_4_module top'>
            <div class='section_4_module_icon'>
            </div>
            <div class='section_4_module_text'>
                <p class='text_1'>Job, Music</p>
                <p class='text_2'>Fields of gold</p>
                <p class='text_3'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                <p class='text_4'>Continue reading...</p>
            </div>
        </div>
        <div class='section_4_module top'>
            <div class='section_4_module_icon'>
            </div>
            <div class='section_4_module_text'>
                <p class='text_1'>Job, Music</p>
                <p class='text_2'>Fields of gold</p>
                <p class='text_3'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                <p class='text_4'>Continue reading...</p>
            </div>
        </div>
    </div>

浏览器宽度至少为 1350px

http://jsfiddle.net/51j6p5s8/

Answer 1

行内 block 元素默认对齐基线。

#section_4 .section_4_module {
  ...
  margin-top: 0.5em;
  vertical-align: top;
}

Demo