Question

我很欣赏这可能是一个简单的问题，但我找不到答案。

我有一个div。在div中，我有3列（由div组成）。

第一个div中有一些文本，第三个div也有一些文本。我希望中间div占用剩下的所有空间。

我玩过绝对的，固定的和相对的位置。

这就是我的意思：

<div id="divheader">
    <div style="float: left; width: 85px;">Caption to the left</div>
    <div style="float: left; width: 100%;">this div has no caption but I want it to take up the remaining space</div>
    <div style="float: left; width: 185px;">caption to the right</div>
</div>
<div id="divpage">
    stuff
</div>
<div id="divfooter">
    footer stuff

Answer 1

如果你没有将div用于任何目的，你可以将最后一个div漂浮在右边而不用担心在中间使用div。

<div>
    <div style="float: left; width: 85px;">Caption to the left</div>
    <div style="float: right; width: 185px;">caption to the right</div>
</div>

Answer 2

您可以将table-cell显示用于此目的。

<强> HTML：

<div class="divided">
    <div style="width: 85px;">Caption to the left</div>
    <div>this div has no caption but I want it to take up the remaining space</div>
    <div style="width: 185px;">caption to the right</div>
</div>

<强> CSS：

.divided {
   display: table;
}
.divided > div {
    display: table-cell;
}

jsFiddle Demo

Browser compatibility：适用于现代浏览器。

Answer 3

你可以使用显示表（这样做的好处是它也可以保持所有三列的高度相同）：

<div style="display:table; width:100%">
    <div style="display:table-cell; width: 85px;">Caption to the left</div>
    <div style="display:table-cell;">this div has no caption but I want it to take up the remaining space</div>
    <div style="display:table-cell; width: 185px;">caption to the right</div>
</div><br />

或者，如果您希望它与旧浏览器更兼容，那么您可以使用填充和负边距：

<div style="padding:0 185px 0 85px">
    <div style="float: left; width: 85px; margin-left:-85px;">Caption to the left</div>
    <div style="float: left; width: 100%;">this div has no caption but I want it to take up the remaining space</div>
    <div style="float: right; width: 185px; margin-right:-185px;">caption to the right</div>
</div>

Example Fiddle

使用div作为填充符

3 个答案: