html - 如何防止div分成两行？

Question

我正在使用 div 来排列表格。这是表头:

<div id="table-header">
                <div id="header-row">
                    <div class="rate-rule-column s-boarder">
                        <div class="header-text ">Rate Rule</div>
                    </div>
                    <div class="rate-column s-boarder">
                        <div class="header-text">Rate</div>
                    </div>
                    <div class="qty-column s-boarder">
                        <div class="header-text">Qty</div>
                    </div>
                    <div class="copies-column s-boarder">
                        <div class="header-text">Copies</div>
                    </div>
                    <div class="amount-column s-boarder">
                        <div class="header-text">Amount</div>
                    </div>
                </div>
            </div>

当前代码使用 float: left 来定位这些元素。问题是:虽然在缩放为 100% 时工作正常，但在放大/缩小时表格行会分成两行。

它不会在一个单元格中分成两行。所以 whitespace: nowrap 在这种情况下没有帮助。有没有办法防止在 div 之间打断线？

编辑:

按要求添加CSS代码。但对我来说唯一有趣的部分是 float: left。

.amount-column{
    width: 130px;
    height: 30px;
    float: right;
}

.copies-column{
    width: 69px;
    height: 30px;
    float: left;
}

.qty-column{
    width: 150px;
    height: 30px;
    float: left;
}

.rate-column{
    width: 150px;
    height: 30px;
    float: left;
}

.rate-rule-column{
    width: 300px;
    height: 30px;
    float: left;
}

Answer 1

您的 div 分成两行的原因是容器 div“header-row”没有固定宽度。它占据视口(viewport)的整个宽度，如果内部元素的宽度大于视口(viewport)的宽度，则 div 将自动换行。要解决此问题，您必须将所有 float div 的宽度相加并将其设置为容器行 div 的宽度。

#header-row{width:  800px; overflow: hidden;}

这应该使 div 与容器 div 保持在同一行。(由于您对列使用固定宽度，我假设您不需要它们来响应)

演示:http://jsfiddle.net/1z3secLz/

希望对您有所帮助。