Question

这个问题类似于之前提出过的许多问题。然而，对于所有先前的问题，必要的宽度是已知的。对我来说，宽度是未知的。

如果我有两列（主要，次要），我将如何使用css，以便主要扩展和收缩，辅助填充剩余的水平空间。我想实现像split pane效果这样的效果，其中分割的位置由主要大小决定。

必须要了解我不知道有多少像素或主要宽度将占用多少，主要尺寸会增加和减少。

可能是：

| ----主---- | ----------------------------二次------- -------------------- |

或者：

| ----- ------主| ----------------------------二次---- -------------------- |

甚至：

| -------------------------主-------------------- ---- | ------- -------二级|

我如何使用CSS执行此操作？是否有可能使元素暂时“贪婪”？

Answer 1

嗯，如果你不喜欢使用它，你可以将display:table-cell CSS属性应用于列，然后对后者使用width:100%。 HTML结构如下所示：

<div class="split-pane">
    <div>
        Left content
    </div>
    <div>
        Right content
    </div>
</div>

CSS：

.split-pane > div {
    display:table-cell;
}
.split-pane > div:first-child {
    white-space:nowrap;
}
.split-pane > div:last-child {
    width:100%;
}

这是一个JSFiddle demonstration，向您展示这是如何实现的。请注意，当您在左侧的一行中添加更多文本时，它会根据需要将边界向右推。（white-space:nowrap;就在那里，左边的内容不会包含在每一个单词上。）请注意，如果需要考虑的话，在旧版本的IE上不能正确解释这个CSS。

如果这不是你想要的，请告诉我，我会很乐意进一步帮助你！

Answer 2

使用像素无法做到这一点是正确的，但是还有其他方法可以定义宽度。我想你可能想尝试在你的CSS中使用％而不是px。

Answer 3

如果'sencondary'div的内容无关紧要，你可以制作一些这样的CSS：

#primary    { position: absolute;
            z-index: 1; }
#secondary  { position: absolute;
            width: 100%;
            z-index: 0; }

如果有内容需要动态移动，您可以使用jQuery轻松移动辅助div。这是一个代码为http://jsfiddle.net/LZJZU/5/

的jsfiddle

使元素填充水平线

3 个答案: