Html 溢出-x 滚动不工作 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18245065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overflow-x scroll not working css
提问by Mikel Max
I am trying to align two divs horizontally and I got it to work using display:inline-blockhowever when I put overlfow-x:scroll to the main container it doesn't work. If the screen is smaller, one of the div goes to the bottom. How can I achieve this? I don't want the second Div to go to the bottom if the screen is small.
我试图水平对齐两个 div 并且我让它工作，display:inline-block但是当我将 overlfow-x:scroll 放到主容器时它不起作用。如果屏幕较小，则 div 之一会移到底部。我怎样才能做到这一点？如果屏幕很小，我不希望第二个 Div 转到底部。
Here's 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;
}
回答by Ali ?ar?k??o?lu
give parameters to width and height, so container can overflow.
为宽度和高度提供参数，因此容器可能会溢出。
.container{
width: 900px;
height: 700px;
display:table;
margin: 0 auto;
overflow:scroll;
}
回答by MitulP91
I altered your code slightly and made the contents float left.
我稍微更改了您的代码并制作了内容float left。
In order you get it to work, you just had to create a wrapper class. You need the outside container to be large enough to just fit your test divs, while the wrapper is large enough to hold both combined. This should be fairly easy to figure out and edit according to the heights/widths that you want the divs to be.
为了让它工作，你只需要创建一个包装类。您需要外部容器足够大以适合您的测试 div，而包装器足够大以容纳两者的组合。根据您希望 div 的高度/宽度，这应该很容易弄清楚和编辑。
Hope it helps.
希望能帮助到你。
