窗口大小调整后的图片移动

在我的网站上，我试图弄清楚这三张图片的格式。窗口大小调整后的图片移动

我有一个高大的图像，我想去左侧，然后我有一个图像，我想去它旁边（右侧），然后我想要最后一张图片旁边的高一个在左侧，但在另一个图像下方。照片需要触摸两侧。

我发现了这个问题的解决方案，但它需要全部是一个文件，所以我不能使用外部.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

窗口大小调整后的图片移动

回答

相关问题