css - Zurb 基金会溢出

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

根据 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