Question

大家好我有三个div，第二个div位于两个div的中间，有不同的浮点数。我希望第二个div的宽度被占用直到第三个div。我需要对第二个div使用width auto，因为在每次缩放时都必须相同。还要检查我的小提琴：http://jsfiddle.net/mailtoshebin/VZn4e/1/

<div id="main">
    <div id="left">1</div>
    <div id="middle">
        <div id="middleTop">
            <div>This div should reach till right div</div>
        </div>
        <div id="middleBottom">
            <div id="middleBottomSub">this goes right this goes right this goes right</div>
        </div>
    </div>
    <div id="right">3</div>
</div>

Answer 1

您可以将#middle显示为块元素，并将其左右边距设置为50px。如果您将#right div移到#middle以上，那将为您带来理想的效果。

CSS：

#left {
    float: left;
    width: 50px;
    height: 150px;
    background-color:#f0f;
     display:inline-block;
}
#right {
    width: 50px;
    height: 150px;
    background-color:#00f;
    float: right;
     display:inline-block;
}
#middle {
    border: 1px solid green;
    margin-left: 50px;
    margin-right: 50px;
    width: auto;
}

HTML：

<div id="main">
    <div id="left">1</div>
    <div id="right">3</div>
    <div id="middle">
        <div id="middleTop">
            <div>This div should reach till right div</div>
        </div>
        <div id="middleBottom">
            <div id="middleBottomSub">this goes right this goes right this goes right</div>
        </div>
    </div>
</div>

示例：http://jsfiddle.net/VZn4e/2/

Answer 2

Lolo的回答是正确的，但您可以使用display:table和display:table-cell

进行不同的回答

摆脱#left和#right中的float，取而代之的是display:table-cell，以及#middle。并将display:table应用于#main（保持HTML不变）。您还必须将width:100%;添加到#main以使用所有水平空间。

#main {
    min-width: 600px;
    height: 150px;
    position: relative;
    width:100%;
    display:table;
}
#left {
    width: 50px;
    height: 150px;
    background-color:#f0f;
    display:table-cell;
}
#right {
    width: 50px;
    height: 150px;
    background-color:#00f;
    display:table-cell;
}
#middle {
    margin: auto;
    width: auto;
    display:table-cell;
}

JSFIDDLE

这个解决方案还有一个额外的好处，即#left和#right将使用#middle内容垂直扩展（如果你需要它）（只是摆脱固定的高度）。

JSFIDDLE

将div中的div与不同的float对齐

2 个答案: