CSS / JS的流动利润率

Question

我尝试创建以下内容：我有块宽度最小和最大宽度，我需要在其左侧和右侧放置内容。当块的宽度等于最大宽度时，左侧和右侧的内容可见（左侧和右侧内容由阴影表示）：

ex 1 http://dev.graymur.net/example/1.jpg

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

ex 2 http://dev.graymur.net/example/2.jpg

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

ex 3 http://dev.graymur.net/example/3.jpg

我不认为这可以用纯HTML / CSS实现，我无法想出javascript解决方案。

请帮帮忙？

更新

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

Answer 1

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

有很多种可能性

Option 1: Static widths

Option 2: Semi-fluid widths

Option 3: Completely fluid widths

选项1的代码：

的HTML

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

的CSS

#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;
}