div不会对齐答案

【问题标题】：Divs wont aligndiv不会对齐
【发布时间】：2015-07-17 05:51:15
【问题描述】：

我正在尝试将 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/

【问题讨论】：

标签： html css

【解决方案1】：

默认情况下，行内块元素与基线对齐。

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

Demo

【讨论】：

【解决方案2】：

如果您希望它们保持相同的大小并对齐，则将包装元素设置为类似于table 和内部元素设置为table-cell 将确保它们的高度相同。这种方法的边距会受到影响，但创造性地使用填充或空表格单元格可以恢复这种情况。

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

【讨论】：

【解决方案3】：

另一种方法是应用

float:left; 
margin-left:20px;

在所有块元素上。

【讨论】：