0

大家好，我有一个三个 div，第二个 div 位于两个具有不同浮点数的 div 中间。我希望第二个 div 的宽度被占用到第三个 div。我需要对第二个 div 使用宽度自动，因为这在每次缩放中都必须相同。还要检查我的小提琴：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>
4

2 回答 2

4

您可以显示#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/

于 2013-11-12T13:58:09.690 回答
1

Lolo 的答案是正确的，但你可以用不同的方式display:table来做display:table-cell

float在#left 和#right 中去掉，改为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

于 2013-11-12T14:04:24.763 回答