Question

有没有办法使用Foundation的网格执行以下操作？

On Large Screens
################ ################
#              # #              #
#              # #    Col 2     #
#              # #              #
#              # #              #
#    Col 1     # ################
#              # #              #
#              # #    Col 3     #
#              # #              #
#              # #              #
################ ################

On Medium Screens
################ ################
#              # #              #
#              # #    Col 2     #
#              # #              #
#              # #              #
#    Col 1     # ################
#              # 
#              # 
#              # 
#              # 
#################################
#                               #
#            Col 3              #
#                               #
#                               #
#################################

我正在使用的代码。

<div class="row">
  <div class="large-6 columns">
    <p>Column 1</p>
  </div>
  <div class="large-6 columns">
    <div class="row">
      <div class="large-12 columns">
        <p>Column 2</p>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <p>Column 3</p>
      </div>
    </div>
  </div>
</div>

有关最佳方法的任何想法吗？ Col 2中的内容将具有text-align: right;并且不会占用太多空间，但是Col 3中的内容将比Col 2中的内容宽得多，因此它将被破坏，这是设计师正在尝试的通过降低col-3来避免。

Answer 1

如果你可以将cols放在像这样的单行容器中，这是可能的。

<div class="row">
  <div class="large-6 small-6 columns">
    <p class="tall">Column 1</p>
  </div>
  <div class="large-6 small-6 columns">
    <p>Column 2</p>
  </div>
  <div class="large-6 small-12 columns">
    <p>Column 3</p>
  </div>
</div>

http://codeply.com/go/rZuxJWtm98

使用Foundation网格将堆叠列放在其他列下方

1 个答案: