Javascript 带有CSS/JS的流动页边距

我尝试创建以下内容：我将块宽度最小值和最大值居中，需要将内容放置在块的左右两侧。当块的宽度等于“最大宽度”时，左侧和右侧的内容可见，左侧和右侧的内容由阴影表示：

将浏览器窗口调整为更窄的值时，中心块和左/右块按比例收缩：

当窗口宽度等于或小于中心块的最小宽度时，左/右块完全消失，只有中心块可见：

我不认为这可以通过纯HTML/CSS实现，我也不能提出javascript解决方案

请帮忙

使现代化

---

上面的描述可能不清楚，用简单的话来说：我尝试为我的中心块创建流体边距：0，当bloks位于其最小宽度时。

对于右侧的内容，您无能为力。当窗口缩小到小于内容宽度时，内容会向右滑出屏幕。但是，您可以通过将所有内容包装在一个容器中并设置父对象的最小宽度来确保您的左侧内容不会丢失

有许多可能性

选项1的代码：

html

---

左边和右边的内容，你只是指背景图片吗？Shmidty-它可能是任何东西jshiddle.net/UNLQ6-这是以背景图片为中心的块体，我需要在左边和右边两个不同的块体，在那里我可以放置任何内容，请阅读更新到我的帖子

<div id='content'>
  <div class='border-content'></div>
  <div id="center"></div>
  <div class='border-content'></div>
</div>

#content {
  min-width: 400px;
  border: 3px solid #9ef;
}
#content:after {
  display: block;
  clear: both;
  content: '';
}
.border-content {
  float: left;
  width: 40px;
  height: 200px;
  background: #eee;
}
#center{
  float: left;
  width:300px;
  height:200px;
  background:url(http://placekitten.com/300/200) no-repeat;
}