如何让div占据固定宽度div后的剩余空间？

如何调整两个 Div，一个具有固定宽度，另一个占用剩余空间

使用两个 div 容器时，其中一个需要特定的宽度，而另一个应该动态占用剩余空间，有几种方法可以实现这种布局。让我们探索两种方法：

使用显示：表格或表格单元格

通过此方法，我们使用 CSS 显示属性来创建类似表格的结构：

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.right {
    float: right;
    width: 250px;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.left {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}</code>

在这种情况下，“右”div 的固定宽度为 250px，而“左”div 由于其“overflow：hidden”属性而占用剩余空间。

使用浮动和百分比宽度

另一种方法涉及使用CSS浮动属性并将div的宽度设置为百分比：

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.left {
    float: left;
    width: 83%;
    min-height: 50px;
    margin-right: 10px;
}

.right {
    float: right;
    width: 16%;
    min-height: 50px;
    height: 100%;
}</code>

这里，“左”div 占据了 83% 的可用宽度，为“右”div 留下了 16% 的固定宽度。

示例演示

检查在 JSFiddle 上进行以下现场演示，以查看这些方法的实际效果：http://jsfiddle.net/SpSjL/

以上是如何让div占据固定宽度div后的剩余空间？的详细内容。更多信息请关注PHP中文网其他相关文章！