如何根据屏幕的宽度设置左div的宽度

Question

首先，我使用容器流体引导程序类来设置主div id ='content'的宽度。在主要div内，我有两个div。不论其位于哪个媒体查询中，id ='content_right'的右div必须具有330px的固定宽度，而id ='content_left'的左div必须具有父div的可变宽度。

<div class='container-fluid'>
  <div class='row'>
    <div id='content' class='col-xs-12'>
      <div id='content_left'>
         The width must be flexible with the width of the parent div. 
      </div>
      <div id='content_right'>
         330px width all the time in all bootstrap media queries
      </div>
    </div>
  </div>
</div>

我知道使用jQuery的上述解决方案。但是我不想使用任何脚本，而是想要使用HTML和CSS的解决方案。

$(document).ready(function(){
	var parentWidth=$("#content").width();
	var left_width=parentWidth-330;
	$("#content_left").width(left_width);
});

Answer 1

尝试一下：

#content_left{
      width: calc(100% - 330px);
      box-sizing: border-box;
 }

如果可能的话，可能必须添加!important（width: calc(100% - 330px) !important;）。