需要连续 3 个 div，其中中心 div 填充页面宽度，无论内容长度如何

Question

我正在尝试创建一个 html 界面，其中行将动态添加到我的网页中。

我目前的做法是使用嵌套 DIV，并将 CSS 显示样式设置为表格。

每行有 3 个 div。左侧 div 和右侧 div 具有固定宽度，而中间 div 应扩展以水平适应页面，无论其内容的长度如何。

我的问题是我不知道如何使中心 div 扩展页面的整个剩余宽度。使用下面的代码，中心 div 与内容一样小。

我尝试了一种解决方案，将左 div 向左浮动，右 div 向右浮动，但这不会让我正确选择一行文本。即，如果我开始选择右侧 div 的内容，然后向左拖动，则左侧和中心 div 将不会被选择。

该解决方案只需要针对基于 webkit 的引擎，因为我的代码将仅在基于 webkit 的环境中使用。

编辑！

我忘了提及我也尝试过使用表格。但是，我还需要避免当屏幕缩小时页面上出现水平滚动条。当我使用表格并缩小页面时，中心 div 在某个点停止缩小（由于我猜是固定宽度百分比）。

我的CSS代码：

.chatarea
{
    display: table;
    height = 100%;
    padding-top:50px;
    margin: 0px;
}

.row
{
    #display: table-row;
}

.nick
{
    display: table-cell;
    width: 140px;
    border-style: solid;
    text-align: right;
}

.timestamp
{
    display: table-cell;
    width 50px;
    border-style: solid;
}

.message
{
    display: table-cell;
    border-style: solid;
}

以及相关的html

<div class="chatarea">
    <div class="row">
        <div class="nick">
            <p>Some Nick</p>
        </div>
        <div class="message">
            <p>Some Message</p>
        </div>
        <div class="timestamp">
            <p>Some Timestamp</p>
        </div>
    </div>
</div>

Answer 1

我相信这是一个解决方案：

• 将 border-collapse:collapse; 添加到 .chartarea 以删除双边框宽度。
• 将 width: 100% 添加到 .chartarea 以覆盖窗口的整个宽度。
• 将 width: 80%; 添加到 .message，使其随着窗口宽度的变化而增长。
• 将 white-space: nowrap; 添加到 .nick 以控制换行。
• 将 white-space: nowrap; 添加到 .timestamp 以控制换行。
• 取消注释 .row 中的 display: table-row

查看此 fiddle。
注意：小提琴页面似乎已被服务器删除。

Answer 2

删除显示样式。然后只需使用：

.nick {
    width: 50px;
    float: left;
}
.timestamp {
    width: 50px;
    float: right;
}

然后 .message 将占用剩余的宽度。

或者，只需使用 元素。

Answer 3

如果你做不到，就假装去做。只需将 .nick 和 .timestamp 放入 .message 中，并将它们绝对定位即可。

.nick
{
    width: 140px;
    border-right-style: solid;
    text-align: right;
    height:100%; 
    position:absolute; 
    top:0; 
    left:0;
}

.timestamp
{
    width: 50px;
    border-left-style: solid;
    position:absolute; 
    top:0; 
    right:0; 
    height:100%;
}

.message
{
    border-style: solid;
    padding:0 50px 0 140px;
    overflow:hidden;
    position:relative;
}

我检查了最近的 chrome 和 safari（在 Windows 上）中的 fiddle 并且选择文本没有问题。