任何一方都有液體圖像的單列布局

我想要做的是製作一個700像素的列，其左側有一張圖像，寬度爲20％，圖像的右側寬度爲佔據了右側的其餘部分。基本上從左到右會有20％寬的圖像，然後是700px寬的列與網站的內容，然後在右側的圖像佔用頁面的其餘寬度。我一直在努力如何做到這一點，我覺得我太複雜了。任何一方都有液體圖像的單列布局

來源

2012-05-12 Tyler Shuster

到目前爲止你有什麼？ – thirtydot

<div id="leftImage" style="float:left;width:20%;background-repeat:no-repeat;background-image:url(URL TO LEFT IMAGE); height: HEIGHT OF LEFT IMAGE IN px;">&nbsp;</div> 
<div id="content" style="width: 700px;float:left;">CONTENT</div> 
<div id="rightImage" style="float:left;background-repeat:no-repeat;background-image:url(URL TO RIGHT IMAGE); height: HEIGHT OF RIGHT IMAGE IN px;">&nbsp;</div><br clear="all" />

嘗試類似的東西。

來源

2012-05-12 20:29:24 Hope4You

這與我曾經有過的相似，但效果更好。唯一的問題是正確的圖像剪輯約十個像素寬。 –

修正了它。刪除浮動並添加溢出：隱藏。謝謝你的幫助！ –

任何一方都有液體圖像的單列布局

回答

相關問題