Question

我有3列我希望并排保留。他们按预期工作，标题简短。但是，一旦我将文本放入列中，它们就会每行最多一行。如何强制文本换行以使列保持并排？

<div class="grid-block align-center">

  <div class="grid-content">
    <p class="text-center">
      Less Stress
    </p>
    <p class="text-center">
      Some very long text here.
    </p>
  </div>

  <div class="grid-content">
    <p class="text-center">
      Less Work
    </p>
    <p class="text-center">
      Some very long text here.
    </p>
  </div>

  <div class="grid-content">
    <p class="text-center">
      More Profit
    </p>
    <p class="text-center">
      Some very long text here.
    </p>
  </div>
</div>

Answer 1

虽然新的Foundation App框架使用Flexbox，但它仍然有一个帮助类，使用更熟悉的＆＃39; medium-x＆＃39;命名。因此，以下代码基于12列网格工作，可以将其更改为任意数量的列。

<div class="grid-block align-center">

  <div class="grid-content large-4">
    <h2 class="text-center">Less Stress</h2>
    <p class="text-center">
      Stop stressing about paperwork, monitoring xxx and xxx, tracking xxx and revenue, trying to stay on top of all operations. XXX takes all the stress away.
    </p>
  </div>

  <div class="grid-content large-4">
     <h2 class="text-center">Less Work</h2>
    <p class="text-center">
      Work less by getting rid of paperwork and streamlining your operations. Life's so much easier because XXX does all the work for you.
    </p>
  </div>

  <div class="grid-content large-4">
      <h2 class="text-center">More Profit</h2>
    <p class="text-center">
      Save money by eliminating paper and data-entry errors, and lowering operational costs. Increase revenue with more accurate billing, faster billing cycles and more time for customers. XXX makes you more profitable.
    </p>
  </div>
</div>

防止包含文本的列包含在Foundation App中

1 个答案: