窗口大小調整後的圖片移動

在我的網站上，我試圖弄清楚這三張圖片的格式。窗口大小調整後的圖片移動

我有一個高大的圖像，我想去左側，然後我有一個圖像，我想去它旁邊（右側），然後我想要最後一張圖片旁邊的高一個在左側，但在另一個圖像下方。照片需要觸摸兩側。

我發現了這個問題的解決方案，但它需要全部是一個文件，所以我不能使用外部.css導入文件。

我現在的工作原理是當屏幕最大化時，但是一旦左側圖片旁邊的所有兩張圖片都調整大小後，它們就會跳到下一張圖片上。

我現在的代碼是這樣的 -

<html> 
<head> 
<style> 
min-width:1024px; 
</style> 
</head> 

<body> 
<div id="wrap"> 
    <div style="float:left;"><img src="tall left image"></div> 
     <img src="top right image"> 
      <img src="bottom right image"> 

       <div style="clear:both"></div> 


</div> 
</div>

來源

2013-07-09 Yun Wong

給你的浮動DIV固定寬度。 –

目前，你的圖像是運動，因爲他們走出屏幕的大小調整時。

你可以迫使他們留在原地的東西，如：

<img style="position: fixed; top: 0px; left: 0px;" src="tall left image" /> 
<img style="position: fixed; top: 0px; left: width-of-tall-image px"; src="top roght image" /> 
<img style="position: fixed; top: height-of-top-image px; left: width-of-tall-image px;" src="bottom right image" />

但你必須有你的設計的其餘部分與position: fixed;，使其停留在地方太多。

來源

2013-07-09 17:59:15 Levans

是否有可能在此處存在並且仍然存在圖像的滾動條工作對於一個屏幕來說太高？ –

其實我想通了。謝謝一堆。 –

有幾種方法可以做到這一點。不知道所有的細節，我會推薦這樣的東西。

HTML：

<div id="wrap"> 
<div id="left"><img src="#" /></div> 
<div id="right"> 
    <div id="top"><img src="#" /></div> 
    <div id="bottom"><img src="#" /></div> 
</div> 
</div>

CSS：

#wrap {min-width: 100px;} 
#left { width: 50px; float: left;} 
#right {width: 50px; float: left;} 
#top { width: 50px; } 
#bottom { width: 50px; }

只要確保你的包裝DIV的最小寬度爲寬度至少爲並排的圖像側。

工作小提琴：http://jsfiddle.net/6sFzk/2/

來源

2013-07-09 17:56:36

窗口大小調整後的圖片移動

回答

相關問題