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

Zurb基金会溢出

1 个答案: