0

我试图在我的网站主页上连续显示三张图片。这在我的机器上显示为我想要的，但是在其他机器上尝试时，布局切换到一行上的 2 个图像，然后在新行上切换到第三个图像。继承人的代码：

<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

The problem with horizontal float is that it is dependent on the width of the page (or browser window). Assuming you have the widths and heights of your images, make the height of the wrapper the height of the tallest image and make the width equal to the sum of the tree images' widths. This will prevent the page/window size from influencing the appearance.

However, as arkascha said, without viewing your CSS I cannot re-create the problem and must assume that it is a sizing issue.

于 2012-07-27T14:55:06.400 回答