使用css的图像布局

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

<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: [email protected]</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); 

}

任何人都可以帮助我解决这个问题吗？

来源

2012-07-27 user1356791

当你不指定它们时，我们应该如何纠正你的css？ – arkascha 2012-07-27 14:50:32

我的css包含在html之后。它不是为你而出现的阿卡斯卡？ – user1356791 2012-07-27 14:56:05

你在说“盒子”里的图像吗？ – 2012-07-27 14:56:13

水平浮动的问题在于它依赖于页面（或浏览器窗口）的宽度。假设你有图像的宽度和高度，请将包装的高度设置为最高图像的高度，并使宽度等于树图像宽度的总和。这将防止页面/窗口大小影响外观。

但是，正如arkascha所说，没有查看您的CSS，我无法重新创建问题，并且必须假定它是一个大小问题。

来源

2012-07-27 14:55:06

我的CSS包含在html之后。它不适合你们吗？ – user1356791 2012-07-27 14:56:24

不好意思，把它放在上面是更好的编码风格。我甚至没有看到它。我将坚持我的解决方案。推理：你已经将你的宽度设置为100％（意思是整个页面宽度），如果页面（或者甚至包装器）太窄，你就没有好处 – 2012-07-27 15:01:12

你有框定义为相对，它最终意味着它考虑到浏览器的大小。你最好的办法是把所有事情都确定为绝对位置，这样他们总是处在那个位置，不管怎样。如果图像变得太大并且超出浏览器的尺寸，它会引起滚动条等，但是它将允许所有3幅图像并排放置在所有窗口尺寸中。

来源

2012-07-27 14:59:31 Gyhth

将div定义为绝对值会使div不居中，但向右移动？ – user1356791 2012-07-27 15:11:07

您必须使用该元素的其他CSS设置，因为它现在不会引用自身周围的元素进行定位，因此您看到的偏移量与其原来的偏移量相比较。如果我回想起来，它也不会以自身周围的其他元素为中心，因为它本身存在于自己的世界中，所以诸如将它与中心对齐的事情不会起作用以及给它绝对的X和Y坐标存在于。 – Gyhth 2012-07-27 15:24:28

使用css的图像布局

回答

相关问题