Question

在我的网站上，我试图让这三个图像以奇怪的格式出现。

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

我找到了解决此问题的方法，但它需要全部是一个文件，因此我无法使用外部.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>

Answer 1

有几种方法可以做到这一点。如果不知道所有细节，我会推荐这样的东西。

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/

Answer 2

目前，您的图片正在移动，因为它们在调整大小时会离开屏幕。

你可以用以下方法强制他们留在原地：

<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;完成设计的其余部分，以便它也能保留在原位。

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

2 个答案: