0

私のウェブサイトでは、これらの 3 つの画像が奇妙な形式になるように取得しようとしています。

左側に行きたい背の高い画像があり、次にその横 (右側) に行きたい画像があり、左側の背の高い画像の隣に最後の写真を置きたい側面も同様ですが、他の画像の下にあります。写真は側面に触れる必要があります。

この問題の解決策を見つけましたが、すべてを 1 つのファイルにする必要があるため、外部の .css インポート ファイルを使用できません。

私が今持っているものは、画面が最大化されているときに機能しますが、サイズが変更されると、左側の画像の横にある 2 つの画像がすべて下にジャンプして、背の高い画像の隣になくなります。

私が今持っているコードはこれです -

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

ラップ 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 に答える