帮助使图像扩大和缩小屏幕分辨率的变化

我有一个架子的图像，我想扩大和缩小屏幕分辨率的宽度变化。货架的两端有图形设计的图像，必须保留在两端。但是，随着屏幕尺寸的变化，我希望中心能够适应搁板的整个宽度。我试过了，似乎无法找到一种方法来处理所有不同的屏幕尺寸。你可以在这里找到一个例子：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; 
}

任何意见将不胜感激。我只编了几个月。谢谢。

来源

2011-07-11 Ryan Bennett

HTTP：/ /jsfiddle.net/SndhQ/ – Jawad

@Jawad你的链接似乎和原来的 – tybro0103

@ tybro0103一样：抱歉，没有分叉并保存它。 http://jsfiddle.net/gX8S3/ – Jawad

在这里，你是先生： http://jsfiddle.net/tybro0103/SndhQ/2/

你在正确的轨道上，短短几年的变化：
1.将“shelfline”分区前“shelfright”分区。
2.降浮子上shelfline宽度（默认的div占据尽可能多的宽度，因为他们可以）
3.化妆shelfline的左，右页边距的一样shelfleft的宽度和shelfright

来源

2011-07-11 15:08:27 tybro0103

谢谢，完美的作品。因此，对于我的教育，我们没有必要放宽架线的宽度，因为它是重复的，并会在父div的宽度？我们增加了保证金，左右货架会显示。那是对的吗？ –

是的，先生，或多或少。如果一个元素是display：block（divs），并且没有浮点和宽度，那么它将占用尽可能多的宽度。这与设置宽度不同：100％;然而，因为没有这些利润率，垫料和边界都被考虑在内。随着这个集合，边距等增加了宽度。是的，浮动元素可以在另一个元素的边界内浮动，但无论出于何种原因，浮动元素必须位于边界元素之前。 – tybro0103

upvote赞赏:) – tybro0103

帮助使图像扩大和缩小屏幕分辨率的变化

回答

相关问题