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

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. 放下搁架线上的 float 和宽度(默认情况下，div 会占据尽可能多的宽度)
3. shelfline的左右外边距与shelfleft和shelfright的宽度相同