Javascript 需要将两个不同的div拉伸到屏幕上，其中一个div位于中间

我想实现以下结构

到目前为止，我所做的是

我试着在

%

侧边设置两个div，中间div设置为

宽度：300px

所有三个div都有

float:left

我面临的问题是

• 右边的空间用于大屏幕
• 最后一个div下降到小屏幕

---

我只希望

而不是

您需要在左右div中再添加几个div 并将外部div设置为

width:50%

并使用
margin:0 auto
并以负利润率将其向下拉


.container{
背景：#ccc；
}
.外套{
背景:#dfdf ;；
填充：20px0；
}
.对，
.leftCnt{
宽度：50%
}
.innerCnt{
背景：#2a4675；
颜色：#fff；
}
.leftCnt.innerCnt{
文本对齐：右对齐
}
.rightCnt.innerCnt{
背景#072a26；
}
.rightCnt.innerCnt{
左边距：170px
}
.leftCnt.innerCnt{
右边距：170px
}
.txtCnt{
最小高度：60px；
填充：10px；
宽度：280px
}
.中环{
宽度：300px；
保证金：-10px自动-90px；
背景：#fff；
填充：10px；
边框：1px实心#ccc；
最小高度：80px
}


Lorem ipsum dolor sit amet，是一位杰出的领导者
毛里斯·尤里索斯的阿利夸
前庭拍卖人dapibus neque

毛里斯·尤里索斯的阿利夸

前庭拍卖人dapibus neque

前庭拍卖人dapibus neque


Lorem ipsum dolor sit amet，是一位杰出的领导者
毛里斯·尤里索斯的阿利夸
前庭拍卖人dapibus neque

将规则保持在百分比似乎对我有用：

.midCnt {
  width: 36%;
  background: #fff;
  padding: 2%;
  border: 1px solid #ccc;
  min-height: 80px;
  box-sizing:border-box;
}


这就是你想要的吗？
通过使用CSS3
Flex方法，你可以达到你想要的结果。请先查看

HTML代码是这样的。

<div class="flex">
    <div>uno</div>
    <div>due</div>
    <div>tre</div>
  </div>

.flex
   {
      /* basic styling */
      width: 100%;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;
      /* flexbox setup */
      display: -webkit-flex;
      -webkit-flex-direction: row;
justify-content: center;
      display: flex;
      flex-direction: row;
   }
   .flex > div
   {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;
      width: 30px; 
   }

   /* colors */
   .flex > div:nth-child(1){ background : #009246; }
   .flex > div:nth-child(2){ background : #F1F2F1; }
   .flex > div:nth-child(3){ background : #CE2B37; }