行级块标签问题无法对齐

图片说明

 <style>
.text-left,.text-right,.text-left2,.text-right2{
    display: inline-block;
    width: 555px;height: 143px;
    background-color: red;
    margin-top: 20px;
}
.text-right2{ margin-top: 40px; }
    </style>

</head>
<body>
    <div class="text-left">
            <h1 id="textleft-h1">易于使用</h1>
            <p>通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。</p>
        </div>

        <div class="text-right">
            <h1 id="textright-h1">构建快速</h1>
            <p>利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。</p>
        </div>

        <div class="text-left2">
            <h1 class="textleft2-h1">插件高质</h1>
                <p>Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。</p>
            </div>
            <div class="text-right2">
            <h1 class="textright2-h1">易于学习</h1>     
                <p>通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。</p>                  
    </div>

这个问题应该怎么解决

用浏览器的f12看下css，最后一个块的margin/padding和线宽。如果都没有问题，加入一个clear清除浮动看看。

这是由于text-right2中的内容折行造成的，改成 .text-right2{ vertical-align:top;} 即可对齐

最后效果是这样的：图片说明

这样改：图片说明

改样式完是不建议的，最多调整的是内外边距，这是你最初就对页面整体结构规划的错误。可以把上面和下面一个单独用一个div标签包裹

用浏览器调度，chrome, firefox , 都可以, 右键块，选择“查看元素”，然后对比左右两个块的样式区别在哪里。找到问题根源再修改

f12审查元素，清除浏览器自带的一些margin，padding