2

我想要一些 div 的相对定位，有一个外部容器并漂浮在一条线上。

实现这一目标的唯一方法是向左浮动我认为对吗？但是如果我这样做，如果元素大于容器宽度，它将换行...

这里的代码：（请不要介意语法错误）

<div style="position:relative;width:300px;height:300px;overflow:scroll">
 <div id="1" style="position:relative;width:200px;height:50px;float:left;"></div>
 <div id="2" style="position:relative;width:200px;height:50px;float:left;"></div>
</div>

id 为 2 的 Div 将换行...如何避免这种情况？

4

3 回答 3

5

如果您display: inline-block;在内部 DIV 和white-space: nowrap;容器上进行设置，我相信它会产生预期的效果......

HTML

<div class="relative">
    <div id="one"></div><div id="two"></div>
</div>

CSS

div.relative {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: scroll;
    white-space: nowrap;
}

div#one, div#two {
    display: inline-block;
    width: 200px;
    height: 50px;
}

这个 jsFiddle生动地展示了结果。

于 2013-06-04T13:16:11.520 回答
0

要么按照 Pete 的建议去做，要么（因为我注意到你设置了一条overflow:scroll规则，我想如果我们在主 div 内滚动就可以了）创建另一个具有巨大宽度的包装元素，以容纳两个内部元素。

这是小提琴：http: //jsfiddle.net/dhs8D/

HTML：

<div style="position:relative;width:300px;height:300px;overflow:scroll">
   <div id="wrapper">
     <div id="one" style="position:relative;width:200px;height:50px;float:left;"></div>
     <div id="two" style="position:relative;width:200px;height:50px;float:left;"></div>
   </div>
</div>

CSS：

#one{
    background-color: red;
}
#two{
    background-color: blue;
}
#wrapper{   
    width: 10000px;
}
于 2013-06-04T13:04:51.790 回答
0

在父 div 上使用white-space: nowrap ；并对内部 div 使用display:inline-block。

<div style="position:relative;width:300px;height:300px;overflow:scroll;white-space: nowrap">
    <div id="1" style="display:inline-block; width:200px;height:50px;float:left;"></div>
    <div id="2" style="display:inline-block;width:200px;height:50px;float:left;"></div>
</div>
于 2013-06-04T13:05:02.297 回答