使用css调整窗口大小时更改框大小

Question

我有这个简单的网站

<div style=" position: relative; margin-right: 40px;">
    <div style="float: left; width: 100px; position: relative;">Middle Stuff</div>
    <div style="float: right; width: 200px; position: relative; margin-right: 40px;">Right Stuff</div>
    <br style="clear: left;" />
</div>

我希望当我调整窗口大小时，中间的东西 - 盒子宽度会增长，以便在中间的东西盒子和正确的东西盒子之间不是空的内容。

我怎样才能获得这种“效果”？

Answer 1

如评论中所述，您可以使用百分比宽度来实现此目的。尽管如此，如果你将边距保持在固定的宽度，那么布局就会破裂。

<div style=" position: relative; margin-right: 40px;">
    <div style="float: left; width: 58%; position: relative; margin-right:2%;" class="middle-div">Middle Stuff</div>
    <div style="float: right; width: 38%; position: relative; margin-right: 2%;" class="right-div">Right Stuff</div>
    <br style="clear: left;" />
</div>

这是Fiddle

此外，您应该尽量避免使用这样的内联样式。相反，我会推荐以下内容：

/* CSS in style.css */
.parent-div {
    position: relative;
    margin-right: 40%;
}
.middle-div, .right-div {
    position: relative;
    float: left;
}
.middle-div {
    width: 58%;
    margin-right: 2%;
}
.right-div {
    width: 38%;
    margin-right: 2%;
}

然后您的标记可以缩减为：

<div class="parent-div">
    <div class="middle-div">Middle DIV</div>
    <div class="right-div">Right DIV</div>
    <br style="clear: left;" />
</div>

Answer 2

<div style="position: relative; margin-right: 40px; width: 100%;">
    <div style="float: left; width: 60%; position: relative; border: 1px solid #000;">Middle Stuff</div>
    <div style="float: left; width: 200px; position: relative; margin-right: 40px;margin-left: 10px; border: 1px solid #000;">Right Stuff</div>
    <br style="clear: left;" />
</div>

试试这个，第二个方框的修正尺寸为200px，第一个方框的修正尺寸为60％。

Answer 3

根据您的图片，您需要留下柱液和右侧固定的： Demo

<div id="outerdiv">
        <div id="right">Right Stuff</div>
        <div id="left">Middle Stuff</div>
    </div>

#outerdiv {
    position: relative;
    margin-right: 40px;
    width: 100%;
}

#left {
    float: left;
    width: 55%;
    position: relative;
    border: 1px solid #000;
}

#right {
    float: right;
    width: 30%;
    position: relative;
    margin-right: 40px;
    border: 1px solid #000;
}

Answer 4

或者您可以使用响应式网格系统，例如this

demo