如何根据屏幕宽度设置左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;）。