幫助使圖像擴大和縮小屏幕分辨率的變化

我有一個架子的圖像，我想擴大和縮小屏幕分辨率的寬度變化。貨架的兩端有圖形設計的圖像，必須保留在兩端。但是，隨着屏幕尺寸的變化，我希望中心能夠適應擱板的整個寬度。我試過了，似乎無法找到一種方法來處理所有不同的屏幕尺寸。你可以在這裏找到一個例子：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

幫助使圖像擴大和縮小屏幕分辨率的變化

回答

相關問題