创建一个大小相对于固定宽度div和包含区域的div ?

I have a containing div (contentBody) that is N% wide. Within that div I have two other divs, contentLeft and contentRight.

我有一个包含N%宽的div (contentBody)。在这个div中，我还有另外两个div, contentLeft和contentRight。

contentLeft is always 205px. I want contentRight to automatically fill the remaining space in contentBody. How can I achieve this?

contentLeft总是205 px。我希望contentRight自动填充contentBody中的剩余空间。我如何做到这一点?

#div contentLeft{
  width:205px;
  float:left;
}

#div contentRight{
  width:<**100% - 205px**>;
  float:left;
}

Edit: Sorry, I meant to write "N%" instead of 100%, this needs to work for a containing area of any percentage or size.

编辑:对不起，我的意思是写“N%”而不是100%，这需要在包含任何百分比或大小的区域工作。

4 个解决方案

#1

The following should do it:

应做到以下几点:

#contentBody{
  width:N%
}
#div contentLeft{
  width:205px;
  float:left;
}

#div contentRight{
  margin-left:205px;
}

#2

the easiest thing to do is to position them both absolutely then set contentleft to the desired with and add margin-left equal to that same width - as follows:

最简单的方法是将它们都放置在合适的位置，然后将内容保留到所需的位置，并添加与相同宽度相等的空白-如下所示:

#div contentLeft{
  position:absolute;
  top:0;
  left:0;
  width:205px;
}

#div contentRight{
  position:absolute;
  width:100%;
  top:0;
  left:0;
  margin-left:205px;
}

#3

You can put float left and width only for contentLeft

只能为contentLeft放置浮动和宽度

.contentLeft{
    width:205px;
 float:left;
 border:1px solid red;

}

.contentRight{
    border:1px solid red;
}

#4

The correct way is to use CSS display:table on the wrapper and display:table-cell on the columns. This keeps your semantics correct but gives you all the benefits of tables including cells stretching to fill remaining space.

正确的方法是在包装器上使用CSS display:table，在列上使用display:table-cell。这使您的语义保持正确，但是提供了表的所有好处，包括扩展单元格来填充剩余空间。

As is typical IE doesn't support this valuable CSS property so you might want to consider using a real table until it does (or perform some hacks with JS or conditional comments).

正如典型的IE不支持这个有价值的CSS属性，所以您可能需要考虑使用一个真正的表，直到它完成(或者使用JS或条件注释进行一些修改)。

<style>
.table {display:table;}
.tr {display:table-row;}
.td {display:table-cell;}
</style>

<div class="table" style="width:100%">
  <div class="tr">
    <div class="td" style="width:205px"><!-- left --></div>
    <div class="td"><!-- right, stretch to fit --></div>
  </div>
</div>

<!--[if ie]>
<script>
// pseudocode, IE6 doesn't support document.getElementsByClassName()
// http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/
for (node in getElementsByClassName('table')) {node.tagName = 'table';};
for (node in getElementsByClassName('tr')) {node.tagName = 'tr';};
for (node in getElementsByClassName('td')) {node.tagName = 'td';};
</script>
<![endif]-->

#1