时间戳

首页 > 解决方案 > 我试图在 HTML5 中创建一个 4 列的行，但列显示一个在另一个下而不是并排

html - 我试图在 HTML5 中创建一个 4 列的行，但列显示一个在另一个下而不是并排

问题描述

我有这行代码：

<section class="section-features">
          <div class="row">
            <h2>HEADER</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>

          <div class="row">
            <div class="col span-1-of-4">
              <h3>HEADER</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="col span-1-of-4">
              <h3>HEADER</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
          </div>

</section>

我的列没有并排显示，而是一个在另一个之下。

标签： htmlcss

解决方案

这可以使用 display flex 属性轻松完成

.row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-orientation: row;
  flex-wrap: wrap;
}
.col{
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  
}

此外，这是一篇关于 flex 工作原理的精彩文章：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

推荐阅读