两个div,一个固定宽度,另一个,其余

Question

我有两个div容器.

虽然需要一个特定的宽度,我需要调整它,这样,另一个div占用了剩下的空间.有什么方法可以做到这一点吗？

.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 -->

Answer 1

请参阅: 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,这通常是一种更好的方法:如何将输入元素放在与其标签相同的行上？

Answer 2

您可以使用CSS的calc()函数.

演示:http://jsfiddle.net/A8zLY/543/

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

.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}

.right {
width:200px;
height:200px;
background:red;
float:right;   
}

希望对你有帮助!!

Answer 3

它是2017年,最好的方法是使用与IE10 +兼容的 flexbox .

.box {
  display: flex;
}

.left {
  flex: 1;  /* grow */
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
  border: 1px dashed #00f;
}

<div class="box">
  <div class="left">Left</div>
  <div class="right">Right 250px</div>
</div>

Answer 4

如果你可以在源代码中翻转顺序,你可以这样做:

HTML:

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

CSS:

.right {
  width: 250px;
  float: right;
}   

一个例子:http://jsfiddle.net/blineberry/VHcPT/

添加容器,您可以使用当前的源代码顺序和绝对定位来执行此操作:

HTML:

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

CSS:

#container {
  /* set a width %, ems, px, whatever */
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
}

.right {
  position: absolute;
  background: red;
  width: 250px;
  top: 0;
  right: 0;
}

在这里,.leftDIV从获得的隐式设置宽度top,left和right风格,允许它填补剩余空间#container.

示例:http://jsfiddle.net/blineberry/VHcPT/3/

Answer 5

如果你可以将它们包装在一个容器中,<div>你可以使用定位使左侧<div>锚定left:0;right:250px,请参阅此演示.我现在要说这在IE6中不起作用,因为只有一个角落<div>可以绝对定位在页面上(请参阅此处获取完整说明).