相关疑难解决方法(0)

防止浮动的div包装到新行

我已经在SO上看过几次这样的问题,并且给出了相同的答案,这些答案在Chrome或Firefox中无效.

我想让一组左浮动的div运行,水平的父div与水平滚动条.

我能够在这里展示我想用这个糟糕的内联css做什么:http://jsfiddle.net/ajkochanowicz/tSpLx/3/

但是,根据SO*给出的答案,这应该有效,但不是我的结论. http://jsfiddle.net/ajkochanowicz/tSpLx/2/

有没有办法在不定义每个项目的绝对定位的情况下做到这一点?

*例如防止浮动的div包裹到下一行

html css css-float

19
推荐指数
1
解决办法
5万
查看次数

停止包含div?

我目前在容器div中设置了div,如下所示:

<div id="container">  
    <div id="element"> Element 1 content </div>  
    <div id="element"> Element 2 content </div>  
    <div id="element"> Element 3 content </div>  
    <div id="element"> Element 4 content </div>  
</div>
Run Code Online (Sandbox Code Playgroud)

style.css中:

.container {
width:200px;
overflow-x:auto;
overflow-y:hidden;
}  

.element {
width:100px;
float:left;
}
Run Code Online (Sandbox Code Playgroud)

这是代码的jsFiddle:http://jsfiddle.net/vZWTc/.

所以,我希望每个元素彼此相邻排列(一行中所有4个),但只有前两个元素可见(容器是200px,每个元素是100px,所以一次只能看到2个) ,用户可以(水平)滚动到第3和第4个元素(因为它们不太重要)

但是,通过此设置,元素3和4将换行到下一行

更新容器类white-space:nowrap没有任何作用.这只会影响文本,而不会影响div.

有任何想法吗?提前致谢!

html css scroll overflow css-float

11
推荐指数
1
解决办法
4万
查看次数

标签 统计

css ×2

css-float ×2

html ×2

overflow ×1

scroll ×1