固定宽度div在右边,填充左边的剩余宽度div

Question

我正在寻找一种方法,将2个div作为列,右边的div有一个固定的宽度,div在左边填充剩余的空间.

有谁碰巧知道这是否可以做到？

我的尝试(在block1下面呈现block2):

<style>
.block1 {
   width: auto;
   height: 200px;

   background-color: green;
}
.block2 {
   float: right;
   height: 200px;
   width: 200px;

   background-color: red;
}
</style>

<div class="block1">test1</div>
<div class="block2">test2</div>

Answer 1

你可以这样做:

HTML:

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

CSS:

.left{
    background:red;

}
.right{
    float:right;
    width:200px;
    background:green
}

查看这个实例http://jsfiddle.net/QHTeS/2/

Answer 2

Float 剩下的两个元素:

<style>
.block1 {
   width: auto;
   height: 200px;
   float: left;
   background-color: green;
}
.block2 {
   float: left;
   height: 200px;
   width: 200px;

   background-color: red;
}
</style>

<div class="block1">test1</div>
<div class="block2">test2</div>

您应该将它们包装在容器中,以防止弄乱其余的布局.:)

http://jsfiddle.net/tcFjN/

那是错的!

display: table;在父母和display: table-cell;孩子身上使用:

<div id="wrapper">
    <div class="block1">test1</div>
    <div class="block2">test2</div>
</div>


#wrapper
{
    display: table;
    width: 100%;
}

.block1 {
       width: auto;
       height: 200px;
       display: table-cell;
       background-color: green;
}
.block2 {
       display: table-cell;
       height: 200px;
       width: 200px;
       background-color: red;
    }

http://jsfiddle.net/tcFjN/1/