使div占据页面的100％，除非另一个div存在

Question

我正在尝试格式化结账页面。 该页面在左侧显示订单摘要，右侧显示推荐产品。 当不使用推荐产品时，我希望订单摘要可以占据页面的100%。

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

如果我取消订单摘要中的宽度或将其更改为100％或auto，则会导致其出现在推荐产品下方。

我曾尝试附加一张解释所有事情的照片，但我想StackOverFlow限制新用户发布照片。

- user3137572

---

如果您添加了照片的链接，其他用户就可以进行编辑。 - Jacob Schoen

你有使用jQuery的权限吗？ - Trevor

这个 fiddle 是否准确地描述了您正在处理的布局？ - Thomas Murphy

@user 很期待您的评论。 - Roko C. Buljan

Answer 1

实际上，这就是你所需要的：演示。

<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;
}

- Roko C. Buljan

---

点击进来本来想告诉他要使用Javascript，但是你的答案让我学到了一些东西，虽然取决于实现方式。非常棒！ - J S

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%');  
        };
 });

你还没有告诉我们如何显示/隐藏推荐产品，但希望这可以帮到你。

- Thomas Murphy