如何通过滚动
使下面的div显示在下面的html中@ http://jsfiddle.net/hj2E6/5/
<div id="scrollable">
<div class="childDiv">
<div class="inner">I am the first div in first should appear inline with the rest of the text</div>
<div class="inner">I am the second div in first should appear inline with the rest of the text</div>
</div>
<div class="childDiv">
<div class="inner">I am the first div in Second should appear inline with the rest of the text</div>
<div class="inner">I am the second div in Second should appear inlinewith the rest of the text </div>
</div>
这是我写的CSS
#scrollable {
width : 50%;
height : 350px;
background-color: #d0e4fe;
overflow-x: scroll;
overflow-y: hidden;
}
.childDiv {
float: left;
}
.inner {
float : left;
}
答案 0 :(得分:1)
您可以使用display:inline-block;
和white-space:nowrap;
使div显示为内嵌并保持在同一行:
<强> DEMO 强>
Inline-block和内联元素渲染,它们之间有空格,
white-space CSS属性用于描述空白的方式 处理元素内部。
nowrap:正常情况下折叠空白,但会抑制换行符 (文本包装)在文本中。
CSS:
#scrollable {
width : 50%;
height : 350px;
background-color: #d0e4fe;
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
}
.childDiv {
display:inline-block;
white-space:nowrap;
}
.inner {
display:inline-block;
}
答案 1 :(得分:1)
您必须在width
上指定child element
。没有指定宽度,它将包含水平块。检查 DEMO 。
因此,请在班级.childDiv
和.inner
中定义宽度。
.childDiv
{
float: left;
width : 50%; /*required to specify the width*/
background:red; /*just for visibility used here*/
padding:3px;
}
.inner {
float : left;
width : 50%; /*required to specify the width*/
}