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;
}

<强> Demo

Answer 2

如果您希望它们保持相同的大小并对齐，请将包裹元素设置为table，内部元素的行为与table-cell相同，将确保它们的高度相同。利润率在这种方法中受到影响，但是创造性地使用填充或空表格单元可以将其带回来。

请在此处查看更新的小提琴：http://jsfiddle.net/51j6p5s8/2/

Answer 3

另一种方法是应用

float:left; 
margin-left:20px;

在所有块元素上。

Divs不会对齐

3 个答案: