Zurb 基金会溢出答案

【问题标题】：Zurb Foundation OverflowZurb 基金会溢出
【发布时间】：2015-05-14 21:38:49
【问题描述】：

我有一个问题，我需要能够在移动设备上滚动查看特定内容。

所以我有一行可以说，它的左半部分我想保持原样 - 它的右半部分需要其中的内容溢出并能够滚动。这样该行的一部分就会超出屏幕宽度，用户可以滚动内容。

我该怎么办？

目前我已经根据需要设置了行，但是每当我在右侧放置更多内容时，它都会尝试将其推到当前内容的下方。

忽略任何自定义 CSS，它们只是对基本填充进行更改。

  <div class="row">
    <div class="row">
        <div class="small-6 columns smallpadding-right">
            <div class="small-5 columns">
            <img class="productImg" src="images/sub_subcategories/airtools.jpg">
            </div>
            <div class="small-5 columns font10 nopadding">
            <a href="#">Brooks DeWalt D25123K-GB </a><br />
            <a href="#" class="button tiny">Remove</a>

            </div>
            <div class="small-2 columns smallpadding">
            <img class="arrows" src="images/arrow_up.png"/>
            </a><input class="input-padding" type="text" value="21"/>
            <img class="arrows" src="images/arrow_down.png"/></a>
            </div>
        </div>
        <div class="small-6 columns">
            <div class="small-6 columns">
            <img class="productImg" src="images/sub_subcategories/airtools.jpg">
            </div>
            <div class="small-6 columns">
            <img class="productImg" src="images/sub_subcategories/airtools.jpg">
            </div>

        </div>
     </div>   
</div>

【问题讨论】：

旁注，您不能重复嵌套行。在开始另一行之前，您可以拥有一列。

标签： css zurb-foundation overflow zurb-foundation-5

【解决方案1】：

根据How to enable overflow scrolling within a Semantic Ui Grid? 和CSS: series of floated elements without wrapping but rather scrolling horizontally（重复？？）

如果我理解您的问题，您应该能够使用如下所示的 HTML 解决您的问题：

<div class="row">
        <div class="small-6 columns smallpadding-right">
         <div class="row">     
            <div class="small-5 columns">
            <img class="productImg" src="images/sub_subcategories/airtools.jpg">
            </div>
            <div class="small-5 columns font10 nopadding">
            <a href="#">Brooks DeWalt D25123K-GB </a><br />
            <a href="#" class="button tiny">Remove</a>

            </div>
            <div class="small-2 columns smallpadding">
            <img class="arrows" src="images/arrow_up.png"/>
            </a><input class="input-padding" type="text" value="21"/>
            <img class="arrows" src="images/arrow_down.png"/></a>
            </div>
        </div>    
        </div>
        <div class="small-6 columns">
         <div class="row" style="overflow-x:scroll; white-space: nowrap">   
            <div class="small-6 columns" style="display:inline-block; float: none;">
            <img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="1">
            </div>
            <div class="small-6 columns" style="display:inline-block; float: none;">
            <img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="2">
            </div>
            <div class="small-6 columns" style="display:inline-block; float: none;">
            <img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="3">
            </div>
            <div class="small-6 columns" style="display:inline-block; float: none;">
            <img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="4">
            </div>
          </div>  
        </div>
</div>

注意内联样式 style="display:inline-block; float: none;" 和 style="overflow-x:scroll; white-space: nowrap" 可以替换为 CSS 和类。

演示：http://sassmeister.com/gist/9530d90ef425eb805da6

【讨论】：