帮助使图像随着屏幕分辨率的变化而扩展和收缩

Question

我有一个架子的图像，我想根据屏幕分辨率的宽度变化进行扩展和收缩。架子的末端有图形设计的图像，必须保留在末端。但是，随着屏幕尺寸的变化，我希望中心适合整个架子的宽度。我已经尝试过，但似乎无法找到一种方法来处理所有不同的屏幕尺寸。您可以在此处找到示例：http://jsfiddle.net/SndhQ/。在此示例中，我将图像更改为仅颜色以使其变得容易。

这是 HTML：

<div class="shelf">
  <div class="shelfleft"></div>
  <div class="shelfline"></div>
  <div class="shelfright"></div>
</div>

这是CSS：

.shelf{
float: left;
left: 5%;
margin-left: 5%;
margin-right: 5%;
position: absolute;
top: 160px;
width: 79%;
}

.shelfleft{
background: red;
float: left;
height: 35px;
width: 19px;
}

.shelfline{
background: yellow;
float: left;
height: 35px;
margin-right: -10px;
width: 96%;
}

.shelfright{
background: blue;
float: right;
height: 35px;
width: 19px;
}

任何建议将不胜感激。我只写了几个月的代码。谢谢。

Answer 1

先生，您来了： http://jsfiddle.net/tybro0103/SndhQ/2/

您在正确的轨道上，只是一些变化：
1.在“shelfline”div之前插入“shelfright”div。
2. 将浮动和宽度放在货架线上（默认情况下，div 尽可能多地占用宽度）
3.让shelfline的左右边距与shelfleft和shelfright的宽度相同