html - div 的水平滚动未按预期工作

Question

我制作了一个 jsfiddle 来演示我的问题： 这里与 css 一起

<div -d=wrapper">
<div id="header">Hello, I'm the header</div>
<div id="content">
    <div id="content-left" >Some text in left</div>
    <div id="content-right">Some text in right</div>
</div>
<div id="footer">Footer</div>
</div>

我想要的是让 div 的 content-left 和 content-right 随着窗口在 x 轴上变窄而变得更窄和新芽滚动条。

它的作用是一旦两个 div 都没有足够的空间，它会将 content-right 堆叠在 content-left 下，而不是缩小它们。我希望滚动条仅在需要时出现。

Answer 1

为 #content显式设置width，否则它将尝试变得聪明并包装元素。

jsFiddle

#content {width:300px;}

Answer 2

JSFiddle

max-width如果需要，请在...上设置 a#content然后为每列设置 50% 的宽度。

#content{
max-width: 300px;
}

#content-left{
width: 50%;
}

#content-right{
width: 50%;
}