Question

现在，我希望p元素获取div元素的剩余宽度。但我需要动态地执行它（没有固定值），因为这个span元素可能不在那里，所以我希望p元素占用所有可用空间。我该怎么办？

Answer 1

当我看到“剩余空间”时，我立即想到了桌子 - tayout：

div {
    display: table;
    width: 200px;
    padding: 20px;
    background-color: lightblue;
}
span {
    display: table-cell;
    background-color: blue;
}
p {
    display: table-cell;
    background-color: red;
}

剩余空间的计算方法如下：

.fullWidth {
    width: 100%;
}

是的，表格仍然很棒。

jsFiddle

请注意，我没有使用display: inline-block;，因为我们希望让内容填满整个表格单元格。

Answer 2

从您的描述中可以看出span在某种程度上是p的一部分？因此，您希望将span嵌套在p内并将width:100%应用于p

http://jsfiddle.net/Bhr4Q/3/

使内联块段落元素占用父div的所有剩余空间

2 个答案:

jsFiddle