使用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 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);
}
任何人都可以帮助我解决这个问题吗?
水平浮动的问题在于它依赖于页面(或浏览器窗口)的宽度。假设你有图像的宽度和高度,请将包装的高度设置为最高图像的高度,并使宽度等于树图像宽度的总和。这将防止页面/窗口大小影响外观。
但是,正如arkascha所说,没有查看您的CSS,我无法重新创建问题,并且必须假定它是一个大小问题。
我的CSS包含在html之后。它不适合你们吗? – user1356791 2012-07-27 14:56:24
不好意思,把它放在上面是更好的编码风格。我甚至没有看到它。我将坚持我的解决方案。推理:你已经将你的宽度设置为100%(意思是整个页面宽度),如果页面(或者甚至包装器)太窄,你就没有好处 – 2012-07-27 15:01:12
你有框定义为相对,它最终意味着它考虑到浏览器的大小。你最好的办法是把所有事情都确定为绝对位置,这样他们总是处在那个位置,不管怎样。如果图像变得太大并且超出浏览器的尺寸,它会引起滚动条等,但是它将允许所有3幅图像并排放置在所有窗口尺寸中。
将div定义为绝对值会使div不居中,但向右移动? – user1356791 2012-07-27 15:11:07
您必须使用该元素的其他CSS设置,因为它现在不会引用自身周围的元素进行定位,因此您看到的偏移量与其原来的偏移量相比较。如果我回想起来,它也不会以自身周围的其他元素为中心,因为它本身存在于自己的世界中,所以诸如将它与中心对齐的事情不会起作用以及给它绝对的X和Y坐标存在于。 – Gyhth 2012-07-27 15:24:28
当你不指定它们时,我们应该如何纠正你的css? – arkascha 2012-07-27 14:50:32
我的css包含在html之后。它不是为你而出现的阿卡斯卡? – user1356791 2012-07-27 14:56:05
你在说“盒子”里的图像吗? – 2012-07-27 14:56:13