在HTML5中有3列对齐问题

这是我的网页当前的显示方式：

我希望这三个在水平方向上彼此相邻。 我试过调整填充和宽度，但这并不能解决问题。 这是我目前拥有的HTML：

<style>
  /* Create three equal columns that floats next to each other */
  .column {
    float: left;
    width: 30%;
    padding: 15px;
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  /* Responsive layout - makes the three columns stack on top of 
  each other instead of next to each other if web browser size is reduced */
  @media screen and (max-width:600px) {
    .column {
      width: 100%;
    }
  }
</style>

/*创建三个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：30%；
填充：15px；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*响应式布局-使三列堆叠在
如果web浏览器的大小减小，则将彼此替换，而不是彼此相邻*/
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
宽度：100%；
}
}

这是分区：

  <div class="row">
    <div class="column">
      <h2>Column</h2>
      <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>

    <div class="column">
      <h2>Column</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>

    <div class="column">
      <h2>Column</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>
  </div>

纵队
献祭精英。梅塞纳坐在我面前。维尼那提万岁，伟大的元素。车上的奎斯克、帕莱瑞特、厄洛斯、维利特的奥奇。这是一种折磨人的权杖

纵队
Lorem ipsum dolor sit amet，是一位杰出的献身者。梅塞纳坐在我面前。维尼那提万岁，伟大的元素。车上的奎斯克、帕莱瑞特、厄洛斯、维利特的奥奇。这是一种折磨人的权杖

纵队
Lorem ipsum dolor sit amet，是一位杰出的献身者。梅塞纳坐在我面前。维尼那提万岁，伟大的元素。车上的奎斯克、帕莱瑞特、厄洛斯、维利特的奥奇。这是一种折磨人的权杖

只需在列中添加一个

包装器

div，并对其应用填充。如果将填充应用于

列

，则会增加导致问题的30%宽度

/*创建三个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：30%；
}
.栏目.内容{
填充：15px；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*响应式布局-使三列堆叠在
如果web浏览器的大小减小，则将彼此替换，而不是彼此相邻*/
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
宽度：100%；
}
}

纵队
献祭精英。梅塞纳坐在我面前。维尼那提万岁，伟大的元素。车上的奎斯克、帕莱瑞特、厄洛斯、维利特的奥奇。普拉森特
权杖使人痛苦

纵队
献祭精英。梅塞纳坐在我面前。维尼那提万岁，伟大的元素。车上的奎斯克、帕莱瑞特、厄洛斯、维利特的奥奇。普拉森特
权杖使人痛苦

纵队
献祭精英。梅塞纳坐在我面前。维尼那提万岁，伟大的元素。车上的奎斯克、帕莱瑞特、厄洛斯、维利特的奥奇。普拉森特
权杖使人痛苦

Flexbox是这种布局的完美解决方案。请注意，媒体查询可将小屏幕的对齐方式更改为垂直布局，而不是大屏幕的水平布局

为完整起见，我还为跨浏览器兼容添加了供应商前缀

.row{
显示：-webkit框；/*旧版-iOS 6-，Safari 3.1-6*/
显示：-webkit flex；/*新-Chrome*/
display:-moz-flex；/*OLD-Firefox 19-（有bug，但大部分可以正常工作）*/
显示器：-ms flexbox；/*TWEENER-IE 10*/
显示：flex；/*新，规范-Opera 12.1，Firefox 20+*/
宽度：100%；/*IE 11需要*/
弯曲方向：行；
}
.栏目{
弹性增长：1
}
/*响应式布局-使三列堆叠在
如果web浏览器的大小减小，则将彼此替换，而不是彼此相邻*/
@媒体屏幕和屏幕（最大宽度：600px）{
.行{
弯曲方向：柱
}
}

纵队
献祭精英。梅塞纳坐在我面前。维尼那提万岁，伟大的元素。车上的奎斯克、帕莱瑞特、厄洛斯、维利特的奥奇。这是一种折磨人的权杖

纵队
Lorem ipsum dolor sit amet，是一位杰出的献身者。梅塞纳坐在我面前。维尼那提万岁，伟大的元素。车上的奎斯克、帕莱瑞特、厄洛斯、维利特的奥奇。这是一种折磨人的权杖

纵队
Lorem ipsum dolor sit amet，是一位杰出的献身者。梅塞纳坐在我面前。维尼那提万岁，伟大的元素。车上的奎斯克、帕莱瑞特、厄洛斯、维利特的奥奇。这是一种折磨人的权杖

这不符合预期的原因是，每列的宽度不是您预期的30%，而是30%加上15px的填充。您可以通过设置

框大小：边框框。这告诉浏览器在宽度中包含填充，这通常更容易使用（因此在本例中，这意味着您的列将始终为30%的宽度，我认为这是您所期望的）

然而，它会
.row {
  display: flex;
  flex-direction: row;
}