保留宽度为像素的div，其他div为百分比

Question

你知道，是不是我想让div 2有一个固定的宽度，只响应div 1和div 3.看看是否有人可以指导我或告诉我一些方法如何将div 2留在像素和其他百分比？

当降低分辨率时，div 1和div 3会变小，但div 2保持固定大小。

有没有办法做到这一点？

我试过这种方式，但是div 3使得较小的reesolución3移动下面的div。我希望它没有发生，并且Div 2保持相同的尺寸，并且它是div 3，当制作更小的分辨率时，它的尺寸很小。

@media screen and (max-width: 1014px) {       
    #div2 { 
        width: 22%;
        min-width: 196px;           
    }

    #div3 {
        width: 78%;
    }

    #div1 {
        width: 100%;    
    }
}

Answer 1

您可以使用service.service() .subscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .subscribe(); 将宽度设置为百分比，同时在第3部分使用侧边栏宽度作为负值。

<div ng-include="'_roles.html'"></div>

calc

Answer 2

很简单。只需将div 2向左浮动并添加所需的宽度即可。然后给div 3留下相同数量的余量作为div 2的宽度。见下面的代码。

<div style="background:green;height:30px;"></div>
<div style="background:red;height:100px;float:left; width:200px;"></div>
<div style="background:grey;height:100px;margin-left:200px;"></div>

请参阅 fiddle 。

Answer 3

希望这会对你有所帮助。

演示：http://jsfiddle.net/zLu5vx7u/

HTML

    <header>1</header>
    <div class="wrapper">
    <div class="left">2</div>
    <div class="right-content">3</div>
    </div>

CSS

    *{margin:0;padding:0;}
    header{background-color:#000; height:50px;}
   body{background-color:red; font-size:50px; color:#FFF;}
   .wrapper{position:relative;}
.left{position:fixed; width:250px;background-color:#ccc;
  min-eight:100%}
  .right-content{position:relative;padding-left:250px;}