0

这是一个与许多以前被问过的问题相似的问题。然而，对于所有前面的问题，必要的宽度是已知的。对我来说，宽度是未知的。

如果我有两列（主要，次要），我将如何使用 css 以便主要扩展和收缩，次要填充剩余的水平空间。我想实现类似拆分窗格效果的效果，其中拆分的位置由主要的大小决定。

必须了解，我不知道primary会占用多少像素或多少宽度，primary的大小会增加和减少。

它可能是：

|----小学----|----------------------------中学---------- -----------------|

或者：

|-----小学------|----------------中学------ -----------------|

甚至：

|--------------------------初级------------------------ -|--------中学--------|

我将如何使用 CSS 做到这一点？甚至有可能使一个元素暂时“贪婪”吗？

4

3 回答 3

1

嗯，如果您不反对使用它，您可以将display:table-cellCSS 属性应用于列，然后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 演示，向您展示它所取得的成果。请注意，当您在左侧的一行中添加更多文本时，它会根据需要将边界向右推。（white-space:nowrap;这样左边的内容不会包含在每个单词上。）请注意，如果担心的话，这个 CSS 将不会在旧版本的 IE 上正确解释。

如果这不是您想要的，请告诉我，我很乐意为您提供进一步的帮助！

于 2013-08-06T19:37:46.030 回答
0

您不能对像素执行此操作是正确的，但是还有其他定义宽度的方法。我认为您可能想尝试在 CSS 中使用 % 而不是 px 。

于 2013-08-06T19:13:33.883 回答
0

如果“次要” div 的内容无关紧要，您可以像这样制作一些 css：

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

如果有需要动态移动的内容，可以用jQuery轻松移动二级div。这是一个带有代码的jsfiddle：http: //jsfiddle.net/LZJZU/5/

于 2013-08-06T19:31:47.210 回答