Question

我正在尝试水平对齐两个div，然后使用display:inline-block让它工作但是，当我把overlfow-x：滚动到主容器时，它不起作用。如果屏幕较小，则其中一个div到达底部。我怎样才能做到这一点？如果屏幕很小，我不希望第二个Div到底。

这是fiddle

<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的高度/宽度来计算和编辑。

Fiddle

希望它有所帮助。

overflow-x滚动不工作css

2 个答案: