Question

我不得不在我的内容的一个部分内强制进行水平滚动，所以我应用于空白：no-wrap css到容器框。所以我设法让内容被迫离开屏幕并创建一个水平滚动但现在我有内容溢出容器盒的问题（因为容器盒停在100％窗口宽度）。

http://s285756995.websitehome.co.uk/offline/

这是我正在处理的网站。

<div style="white-space:nowrap">
                <div class="moo">
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>

                    <div class="fader-empty active-cell tape">
                        <p class="rotate">I am some text</p>
                        <div class="fader-icons fs-iso"></div>
                        <div class="fader-icons fs-slave"></div>
                    </div>


                    <div class="fader-empty active-cell">
                        <p class="rotate">I am some text</p>
                    </div>
                    <div class="fader-empty active-cell">
                        <p class="rotate">I am some text</p>
                    </div>
                    <div class="fader-empty active-cell">
                        <p class="rotate">I am some text</p>
                    </div>
                    <div class="fader-empty active-cell tape">
                        <p class="rotate">I am some text</p>
                    </div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>
                    <div class="fader-empty"></div>

                    <div class="clearfix"></div>

                    </div><!--end of moo-->

                </div><!--end of stupid wrap style-->

CSS：

.moo { 
background:#f1f1f1;
padding:10px 10px 10px 15px;
margin-bottom:10px;
margin-top:10px;



.fader-empty {
background:#e5e7ea;
border:1px solid #a1a1a1;
min-height:292px;
width:43px;
display:inline-block;
margin-left:-5px;
position:relative;
overflow:hidden;

我知道浮动或内联块基本上会“关闭”页面，所以没有什么可以将容器推出去，所以这就是为什么我试着清除它们但我觉得这不对？

除非有更好的方法来实现水平滚动而不是无包裹。另外，我不能在.moo上放置固定宽度，因为小盒子的数量会改变

Answer 1

我建议添加：

overflow-x: auto

到.moo个样式

这将使moo容器拥有它自己的滚动条 - 如果这是你想要的？

Answer 2

我能看到解决“背景”问题的唯一方法是让您的.moo班级为position:absolute。然后它的宽度不受父母溢出的限制。

但这需要您将.fader-setup-drag-area元素（父级）设置为position: relative并为其指定固定高度。像这样：

.fader-setup-drag-area {
    overflow: auto;
    padding-left: 80px;
    position: relative;
    height: 360px;
}

.moo {
    background: #f1f1f1;
    padding: 10px 10px 10px 15px;
    margin-bottom: 10px;
    margin-top: 10px;
    position: absolute;
}

修改

可能有更好的方法！您可以使用display: table;和display: table-cell的技巧设置元素，不使用使用float或nowrap。

我创造了一个小提琴，其场景与你的相似。 http://jsfiddle.net/A7Fkd/1/

Answer 3

我想我已经找到了一个解决方案，而且还在搞乱。

我放了一个漂浮物并清除了moo，似乎已经完成了这个技巧，现在正在包裹内容。我并不认为这会因某种原因起作用，但它似乎已经完成了：

.moo { 
background:#f1f1f1;
padding:10px 10px 10px 15px;
margin-bottom:10px;
margin-top:10px;
white-space:nowrap;
float:left;
clear:both;
}

我仍然无法理解为什么会这样做

如何将内容保留在应用了no-wrap css的容器中

3 个答案: