javascript - 使用 CSS/JS 的流动边距

Question

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

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

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

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

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

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

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

请帮忙？

更新

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

Answer 1

There's not much you can do about the content on the right side. When the window shrinks to be smaller than the width of the content, the content slides offscreen to the right. However, you can make sure your left content doesn't get lost by wrapping everything in a container and setting the min-width on that parent.

There are a number of possibilities

Option 1: Static widths

Option 2: Semi-fluid widths

Option 3: Completely fluid widths

Code for Option 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;
}