Zurb Foundation Overflow

Question

我有一个问题，我需要能够在手机上滚动以获取特定内容。

所以我有一排，我想保持原样的左侧一半 - 右半部分需要其中的内容才能溢出并能够滚动。因此，该行的一部分将延伸到屏幕宽度上方，用户可以滚动内容。

我将如何解决这个问题？

目前我需要我的行设置，因为我需要它们，但是每当我将更多内容放在右侧时，它都试图将其推在当前内容下。

忽略任何自定义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>

Answer 1

根据如何在语义UI网格中启用溢出滚动？和CSS：一系列漂浮的元素而没有包装而不是水平滚动（重复？）

您应该，如果我理解您的问题，就可以使用下面显示的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>

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

演示：http：//sassmeister.com/gist/9530D90EF425EB805DA6