分割屏幕为2个div并设置第二个宽度，其余空间为css？

Question

我有2个块内联div。

我不想指定第一个的宽度，但我希望第二个占用剩余空间的100％。两个div的容器占据了我的屏幕的100％。

似乎可以使用jQuery来确定第一个div的宽度并设置第二个值，但我想在纯css中进行。

我该怎么做？

Answer 1

div.box {
  background: #EEE;
  height: 100px;
  width: 600px;
}

div.div1 {
  background: #999;
  float: left;
  height: 100%;
  width: auto;
}

div.div2 {
  background: #666;
  height: 100%;
}

div.clear {
  clear: both;
  height: 1px;
  overflow: hidden;
  font-size: 0pt;
  margin-top: -1px;
}

<div class="box">
   <div class="div1">1st</div>
   <div class="div2">2nd</div>
   <div class="clear">
</div>

希望它有所帮助。

Answer 2

如果你不想使用jquery那么这可能值得做

<div style="width:100%;"> 
        <div style="float:left; display:inline-block;" class="div1">left div</div> 
        <div style="float:right; display:inline-block;" class="div2">right div</div> 
    </div> ​