如何将宽度的其余部分设置为元素？

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>

Answer 2

你可以使用set container来100％并且像示例

那样休息等效的左右div

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

.rightbar, .leftbar{
  width: 100px;
}
.container{
  
      width: calc(100% + -206px);
}

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

<div class="leftbar">leftbar
</div><div class="container">container
</div><div class="rightbar">rightbar</div>

Answer 3

选项1 为容器添加媒体查询：

＆＃13;

＆＃13;

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

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

.container {
  width: 55%;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

选项2 将元素包装在容器中，然后使用flexbox：

＆＃13;

＆＃13;

.wrapper {
  display: flex;
}

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

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

.container {
  width: 100%;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

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

@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> 

它也适用于响应