一尘不染

使div填充剩余宽度

html

如何使div填充剩余宽度?

<div id="Main" style="width: 500px;">
    <div id="div1" style="width: 100px;"></div>
    <div id="div2"></div>
    <div id="div3" style="width: 100px; float: right;"></div>
</div>

我如何才能div2填满其余部分?


阅读 302

收藏
2020-05-10

共1个答案

一尘不染

试试这样的事情:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

div自然会占用其容器的100%宽度,因此无需显式设置此宽度。通过添加与两侧div相同的左/右页边距,它自己的内容被强制置于它们之间。

请注意,“中间格”云 的HTML“正确的div”

2020-05-10