我试图水平对齐两个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;
}
3条答案
按热度按时间4dc9hkyq1#
给予宽度和高度参数，这样容器就可以溢出。
http://jsfiddle.net/f5HWD/3
2fjabf4q2#
我稍微修改了你的代码，使内容为
float left。为了让它工作，您只需创建一个 Package 器类。您需要外部容器足够大以刚好容纳您的测试div，而 Package 器足够大以容纳两者的组合。这应该是相当容易弄清楚和编辑根据高度/宽度，你希望divs是。
Fiddle
希望能帮上忙。
jk9hmnmh3#
在我的情况下显示Flex正在工作。