Divs不会对齐

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

默认情况下,内联块元素与基线对齐.

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

演示