javascript - 如何将其余宽度设置为元素？

Question

这是我的代码:

.rightbar, .container, .leftbar{
  display: inline-block;
  border: 1px solid;
  text-align: center;
}

.rightbar, .leftbar{
  width: 20%;
}

@media (max-width: 599px) {	
    .hidden-mob{
        display: none !important; 
    }
		
}

<div class="leftbar">leftbar</div>
<div class="container">container</div>
<div class="rightbar hidden-mob">rightbar</div>

我想将 width 的其余部分设置为 .container 元素。我可以为它设置 width: 60%;。但我不想那样。因为在小屏幕尺寸下，.rightbar 元素将被隐藏，.container 的宽度应自动为 80%。

无论如何，我有什么想法可以处理吗？

Answer 1

将 .container 添加到您的媒体查询中(此外，由于元素的边框，您需要使用稍小的百分比):

.rightbar,
.container,
.leftbar {
  display: inline-block;
  border: 1px solid;
  text-align: center;
}

.container {
  width: 59%;
}

.rightbar,
.leftbar {
  width: 19%;
}

@media (max-width: 599px) {
  .hidden-mob {
    display: none !important;
  }
  .container {
    width: 78%;
  }
}

<div class="leftbar">leftbar</div>
<div class="container">container</div>
<div class="rightbar hidden-mob">rightbar</div>