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％时效果很好，但放大/缩小时表格线会分成两行。

它没有在一个单元格中分成两行。所以空白：nowrap在这种情况下没有帮助。有没有办法防止破坏div之间的界限？

修改：

按要求添加css代码。但对我来说唯一有趣的部分是浮动：左。

.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”没有固定的宽度。它占用视口的整个宽度，如果里面的元素的宽度大于视口，则div将自动换行到一个新行。为了解决这个问题，你必须将所有浮动div的宽度相加，并将其设置为容器行div的宽度。

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

这应该将div与容器div保持在同一行。（因为您使用固定宽度的列我假设您不需要它们响应）

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

希望有所帮助。

Answer 2

当您的屏幕尺寸发生变化时，您正在使用固定宽度。元素不会相应更改。尝试使用％widths代替：

Ex:.copies-column{
    width: 23%; //Just an example but you need to adjust the width of all elements in % according to your desired output
    height: 30px;
    float: left;
}

Answer 3

使用基于百分比的宽度将允许响应，我会在那种情况下进行文本对齐，但如下所示。另外，通过添加margin：0 auto;如果你愿意的话，你可以给一个容器父母一些阴沟。在这种情况下，你也应该“清除”包含div。 http://jsfiddle.net/6ws00cey/

.amount-column, .copies-column, .qty-column, .rate-column, .rate-rule-column{
    width: 20%;
    height: 30px;
    float: left;
    text-align: center;
}

.header-row{
    clear: both;
}

如何防止div分成两行？

3 个答案: