css - 溢出-x滚动不起作用css

Question

我正在尝试水平对齐两个 div，并且可以使用它，display:inline-block 但是当我将 overlfow-x:scroll 放到主容器中时，它不起作用。如果屏幕较小，则其中一个 div 将移至底部。我怎样才能做到这一点？如果屏幕很小，我不希望第二个 Div 到底部。

这是小提琴

<div class="container">
<div class="test1">test1</div>
<div class="test2">test2</div>
</div>

.container{
display:table;
margin: 0 auto;
overflow-x:scroll;
}

.test1{
background-color:red;
 width:500px;
margin-left:16px;
display:inline-block;   


 }
.test2{
 margin-left:40px;
display:inline-block;
background-color:gray;
width:80px;

vertical-align:top;


}

Answer 1

给宽度和高度参数，所以容器可以溢出。

http://jsfiddle.net/f5HWD/3

.container{
    width: 900px;
    height: 700px;
    display:table;
    margin: 0 auto;
    overflow:scroll;
}

Answer 2

我稍微更改了您的代码并制作了内容float left。

为了让它工作，你只需要创建一个包装类。您需要外部容器足够大以适合您的测试 div，而包装器需要足够大以容纳两者的组合。根据您希望 div 的高度/宽度，这应该很容易计算和编辑。

小提琴

希望能帮助到你。