Question

我想要一些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将在新行中中断...如何避免这种情况？

Answer 1

如果您在内部DIV上设置display: inline-block;而在容器上设置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;
}

This jsFiddle多彩地证明了结果。

Answer 2

要么做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;
}

Answer 3

在父div上使用 white-space：nowrap ;并使用 display：inline-block 表示内部div。

<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>

CSS相对定位不破线

3 个答案: