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

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

目前,订单摘要设置为float：left;宽度：720像素;.推荐产品浮动：右;宽度：240;.

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

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

解决方法

实际上这就是你所需要的： 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;
}