0

Web サイトのホームページに 3 つの画像を続けて表示しようとしています。これは自分のマシンでは思いどおりに表示されますが、他のマシンで試してみると、レイアウトが 1 つの行で 2 つの画像に切り替わり、次に新しい行で 3 つ目の画像に切り替わります。コードは次のとおりです。

<body>
<div id="container">
    <div id="header">
        <h1>
            <!--<a href="#"><img src="tracylogo7.jpg" alt="Millington and Hope" /></a> -->
            <a href="#"><img src="tracylogoup6.jpg" alt="Millington and Hope" /></a>
        </h1>
        <h2>
            <!--<a href="#"><img src="tracylogo5_header.jpg" alt="Millington and Hope" /></a> -->
        </h2>   
    </div>
    <ul id="nav">
        <li><a href="index.html">Home</a></li><!--
        --><li><a href="stock.html">Stock</a></li><!--
        --><li><a href="events.html">Events</a></li><!--
        --><li><a href="contact.html">Contact</a></li>
    </ul>
    <div id="box">
            <a href="#"><img src="home4.jpg" alt="Image 1" /></a>

            <a href="#"><img src="home_mir.jpg" alt="Image 2" /></a>

            <a href="#"><img src="home_urn.jpg" alt="Image 3" /></a>
    </div>
    <div id="box2">
        <a href="#"><img src="tracylogosmall.jpg" alt="Logo" /></a>
    </div>
    <div id="footer">
        <p class="client">Tel: 07858740&nbsp;&nbsp;&nbsp;&nbsp;E-mail: contact@millingtonandhope.com</p>

    </div>
</div>      
</body>
<style type="text/css">

html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

body
{
    background:rgb(171,163,144);
    text-align: center;
    min-width: 600px;
}

#container
{
    margin:0 auto;
    background:rgb(171, 163, 144);
    width:80%;

}       


#header
{
    padding: 0px;
    color: white;
    width:100%;
    text-align:center;
}


#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:25px;
   width:100%;
   background:rgb(151,143,124);
   border-top:solid 1px white;
}

.client
{
    color:white;
    margin:3px auto;
    text-indent:1cm;
    text-align:left;
}   

#sold
{
    color: red;
}

#box
{
    position:relative;
    margin:0 auto;
    width:100%;
    height:200px;
    margin-top:100px;
}
#box img
{
    margin:0 auto;
    border:solid 1px white;
    margin: 10px;
}

#box2
{
    position:relative;
    margin-top:260px;
    width: 100%;
}

#box2 img
{
    margin:0 auto;
    opacity:0.5;
    filter:alpha(opacity=50);

}

誰かがこれを修正する方法について私を助けることができますか?

4

2 に答える 2

0

相対として定義されたボックスがあります。これは、最終的にブラウザのサイズなどを考慮に入れることを意味します。あなたの最善の最善は、すべてを位置の絶対値として定義することです。そうすれば、それらは常にその位置にあり、何があってもその位置になります。画像が大きくなりすぎてブラウザーのサイズを超えると、スクロール バーなどが表示されますが、3 つの画像すべてをすべてのウィンドウ サイズで並べて表示できます。

于 2012-07-27T14:59:31.480 に答える
0

水平フロートの問題は、ページ (またはブラウザー ウィンドウ) の幅に依存することです。画像の幅と高さがあると仮定すると、ラッパーの高さを最も高い画像の高さにし、幅をツリー画像の幅の合計に等しくします。これにより、ページ/ウィンドウのサイズが外観に影響を与えるのを防ぐことができます。

ただし、arkascha が言ったように、CSS を表示せずに問題を再現することはできず、サイズの問題であると想定する必要があります。

于 2012-07-27T14:55:06.400 に答える