当添加更多浮动 div 时，使 div 仅水平扩展

我正在尝试制作一个包含其他浮动 div 的 div 来调整其宽度，以便添加更多浮动 div（动态使用 jQuery）只会扩展 div 的宽度，而不允许浮动 div 创建新行。因此，我想解决这个问题，使每个带有类的 divgrid-row仅在宽度上扩展，因此我将能够使用overflow: scroll为家长grid分区我查了很多答案，看来这是一个著名的问题。然而，没有一个答案解决了我的问题。

我目前正在这样做：

    <div id="grid_container">
        <div id="grid">
            <div class="grid_row">
                <div class="module" id="experience">
                    Experience
                </div>
                <div class="header">
                    Google
                </div>
                <div class="header">
                    Microsoft
                </div>
            </div>
            <div class="grid_row">
            </div>
        </div>
    </div>

CSS:

body {

}

#grid_container { 
    margin: 50px auto;
    width: 500px;
    height: 500px;
    padding: 10px;
    border: black solid 1px;
}

#grid {
    overflow:scroll;
    height: 100%;
}
.grid_row { 
    clear: both;
    height: 50px;
}
.module, .header{
    padding: 10px;
    float: left;
    border: gray solid 1px;
}

您可以通过使行容器浮动并具有样式“white-space: nowrap;”来实现此目的

http://jsfiddle.net/UeNZr/3/ http://jsfiddle.net/UeNZr/3/

EDIT另一种方法是使每个项目内联显示并使每个网格元素浮动。http://jsfiddle.net/UeNZr/5/ http://jsfiddle.net/UeNZr/5/.