两个div，一个固定宽度，另一个，其余 [英] Two divs, one fixed width, the other, the rest

问题描述

我有两个div容器。

虽然需要一个特定的宽度，我需要调整它，使其他div占用其余的空间。有什么办法可以做到吗？

Whilst one needs to be a specific width, I need to adjust it, so that, the other div takes up the rest of the space. Is there any way I can do this?

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}

<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

推荐答案

请参阅： http://jsfiddle.net/SpSjL/ （调整浏览器的宽度）

HTML ：

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

CSS：

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

---

display：table ，这通常是一个更好的方法：

---

You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?

这篇关于两个div，一个固定宽度，另一个，其余的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！