除非存在另一个div，否则div占用页面的100％

Question

我正在尝试格式化结帐页面。该页面左侧显示订单摘要，右侧显示推荐产品。如果没有使用推荐产品，我希望订单摘要能够延伸100％的页面。

目前，订单摘要设置为float:left; width:720px;。推荐产品float:right;width:240;。

如果我从订单摘要中取出宽度或将其更改为100％或自动，则只是低于推荐产品。

我尝试附上一张解释所有内容的照片，但我猜StackOverFlow会限制新用户发布照片。

Answer 1

实际上这就是您所需要的：DEMO

<div class="summary">
  <div>Order summary...</div>
  <div>Products...</div>
</div>

.summary{
  display:table;
  width:100%;
}
.summary>div{
  display:table-cell;
}
.summary>div:first-child{
  background:gray;
}
.summary>div:nth-child(2){
  background:orange;
  width:240px;
}

Answer 2

我相信这描述了你的情况。尝试使用底部的按钮来回切换：

http://jsfiddle.net/T2Quv/21/

此处的关键是根据推荐的产品是显示还是隐藏来动态设置javascript：

$('.mrbutton').click(function(){
   $('.rec').toggle(); 

    if($('.rec').css('display') == 'none'){
    $('.checkout').css('width', '100%');  
    }else{
       $('.checkout').css('width', '69%');  
        };
 });

您尚未告诉我们推荐产品的显示/隐藏方式，但希望这会有所帮助。