0

在我的网站上，我试图让这三张图片采用奇怪的格式。

我有一个高大的图像要放在左侧，然后我有一个图像要放在它旁边（右侧），然后我想将最后一张图片放在左侧的高大图像旁边侧面也是如此，但在另一张图像下方。图片需要接触侧面。

我找到了解决这个问题的方法，但它必须是一个文件，所以我不能使用外部 .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>

4

2 回答 2

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; }

只需确保 wrap div 上的最小宽度至少与并排的图像一样宽。

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

于 2013-07-09T17:56:36.397 回答
0

目前，您的图像正在移动，因为它们在调整大小时会超出屏幕。

您可以通过以下方式强制它们保持原位： 

<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-09T17:59:15.707 回答