3列設計：第三張圖片延伸至100％

我正在建立一個新網站，我想我已經讓我的設計有點太複雜了，所以現在我正在努力處理代碼。3列設計：第三張圖片延伸至100％

我想讓我的網站由三列組成，它們彼此相鄰。

列1將具有width:200px和height:100%所以它會垂直地充滿屏幕，則在它旁邊會有一個第二柱，用width:500px和相同height:100%。最後，最後一列將填充屏幕的其餘部分，因此它將是width:100%和height:100%，並且在該列中，我希望放置一張可以伸展並填充該div的圖像。

這可能嗎？非常感謝您的幫助。

來源

2011-11-03 jmysona

什麼代碼，你到目前爲止？編輯你的問題以包含它，並且可以選擇[jsFiddle demo]（http://jsfiddle.net/）。 – thirtydot

如果你發現某種方式來擴大高度的形象，它會看起來很扭曲。你想用圖像達到什麼目的？如果它的紋理或圖形，你可以嘗試使它成爲背景圖像並重復。 – WooHoo

這裏是我的設計http://www.fsdegrees.com/subpage.jpg我認爲Jasper解決方案將工作我會嘗試，但圖像可能會得到一點恢復，所以一些jquery可能需要 – jmysona

這可以用一些CSS來實現：

HTML

<div id="container"> 
    <div id="left"></div> 
    <div id="middle"></div> 
    <div id="right"> 
     <img src="http://www.thegardenhelper.com/pixpg/graphics/sammy.jpg" /> 
    </div> 
</div>

CSS

/*You want to make sure the document is set to the fullscreen width*/ 
html, body { 
    width : 100%; 
    height : 100%; 
} 
/*Set the container div to the full size of the document and set its position to something other than `static` so its children will take their position relatively from it*/ 
#container { 
    width  : 100%; 
    height  : 100%; 
    position : relative; 
    background : black; 
} 
/*absolutely position the left column to be 200px wide*/ 
#left { 
    position : absolute; 
    left  : 0px; 
    top  : 0px; 
    width : 200px; 
    height : 100%; 
} 
/*absolutely position the middle column to be 500px wide and start 200px from the left*/ 
#middle { 
    position : absolute; 
    left  : 200px; 
    top  : 0px; 
    width  : 500px; 
    height  : 100%; 
    background : blue; 
} 
/*absolutely position the right column to take the rest of the page starting from 700px from the left*/ 
#right { 
    position : absolute; 
    left  : 700px; 
    top  : 0px; 
    right  : 0px; 
    height  : 100%; 
    background : red; 
} 
/*set the image to 100% height and width to fill its container (#right)*/ 
/*alternatively you can set the width of the image to `auto` so it will scale with the aspect ratio intact but still take-up 100% of the page's height*/ 
#right > img { 
    width : 100%; 
    height : 100%; 
    border : none; 
}

下面是上述解決方案的的jsfiddle：http://jsfiddle.net/jasper/7y9DZ/2/

來源

2011-11-03 19:03:11 Jasper

嗨賈斯珀你的解決方案工作正常，但圖像被扭曲了，所以我用了一個Jquery插件來克服，但由於某種原因，插件並不是100％的工作，特別是在IE瀏覽器（這裏沒有新東西）看看http://bonta.co.uk/test/test.html你知道任何更好的解決方案，非常感謝 – jmysona

如果由於扭曲你的意思是縱橫比不能保持不變，只需將圖像的「高度」或「寬度」更改爲「auto」：'#right> img {width：100％;身高：自動; border：none;}'並將'＃right' div的溢出設置爲'hidden'，以便剪切圖像：'#right {position：absolute; left：700px; top：0px; right：0px;身高：100％;背景：紅色;溢出：隱藏;}'。這是一個jsfiddle與兩個建議的改動：http://jsfiddle.net/jasper/7y9DZ/3/ – Jasper

3列設計：第三張圖片延伸至100％

回答

相關問題