第一题：左中右布局，中间自适应并优先显示在前面

[kujian]

左侧200px，右侧300px，中间自适应并优先显示在前面。（忽略ie兼容性问题）

[wanglianga]

父容器(width:100%;display:flex;min-width:600px) 中间宽度(calc(100% - 500px))

[kujian]

<div class="container">
  <div class="center">
    <div class="cont">中间内容</div>
  </div>
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</div>

.container{min-width:600px;}
.center{float:left; width:100%;}
.cont{margin-left:200px; margin-right:300px;}
.left{float:left; margin-left:-100%; width:200px;}
.right{float:left; margin-left:-300px; width:300px;}

【演示】

兼容性最好，常用这种写法

[zxjzx]

.content{
  display: grid;
  min-width: 600px;
  grid-template-columns:200px 1fr 300px;
}

<div class="content">
  <div class="left">左边</div>
  <div class="center">中</div>
  <div class="right">右</div>
</div>

[kujian]

<div class="container2">
  <div class="center2">中间内容</div>
  <div class="left2">左侧内容</div>
  <div class="right2">右侧内容</div>
</div>

.container2{position:relative; color:yellow; min-width:600px;}
.center2{position:absolute; left:200px; right:300px; top:0; background:black;}
.left2{position:absolute; left:0;top:0; width:200px; background:orange;}
.right2{position:absolute; right:0; top:0; width:300px; background:orange;}

【演示】

浮动布局，适用全布局，不适用局部布局（需要限制高度）

[EnTrouble]

 <div class="father">
   <div class="left">左侧</div>
   <div class="right">右侧</div>
   <div class="content">中间文字</div>
 </div>

.father {min-width: 600px;}
.left {float: left;width: 200px;}
.right {float: right;width: 300px;}
.content {text-align: center;}

[kujian]

flex布局

<div class="container4">
  <div class="center4">中间内容4</div>
  <div class="left4">左侧内容4</div>
  <div class="right4">右侧内容4</div>
</div>

.container4{display:flex; flex-flow:row nowrap;}
.left4{width:200px; background:orange; order:1;}
.center4{flex:1;background:purple; order:2;}
.right4{width:300px;background:orange; order:3;}

【演示】

移动端适用