Question

我的问题与此问题相同：make a div fill up the remaining width

但我不想改变div的顺序。

在我的具体案例中，我希望：

@authorization_required

如果我重新排列div的顺序，我可以做这项工作，但我不想这样做，因为在移动设备上我想让所有div的宽度100％和订单应该保留。有没有办法做到这一点？ flexbox是唯一的解决方案吗？

Answer 1

只需使用calc()即可。只要父div更改大小，100%就会更新，calc()也会更新。这意味着它也应该是完全响应的。

.my-div {
    width: calc(100% - 500px);
}

Answer 2

尝试以下方法，它也是响应！

＆＃13;

.w-250{
    width: 250px;
    height: 75px;
    
    float: right;
    border: 1px solid red;
}
#r-boxer{
    overflow: hidden;
}
#r-elem{
    width: 99%;
    height: 75px;
    
    border: 1px solid blue;
}

＆＃13;

<div id="container">
  <div class="w-250">Width 250px;</div>
  <div class="w-250">Width 250px;</div>
  <div id="r-boxer"><div id="r-elem">Remaining Space</div></div>
</div>

＆＃13;

使div填充剩余的宽度而不更改元素的顺序

2 个答案: