Html 使用css的图像布局_Html_Css_Image_Layout

Html 使用css的图像布局

html css image layout

Html 使用css的图像布局,html,css,image,layout,Html,Css,Image,Layout,我试图在我的网站主页上有三个连续的图像。这在我的机器上显示为我想要的，但在其他机器上尝试时，布局会切换为一行上的两个图像，然后是新行上的第三个图像。代码如下： <body> <div id="container"> <div id="header"> <h1> <!--<a href="#"><img src="tracylogo7.jpg" alt="Millington a

我试图在我的网站主页上有三个连续的图像。这在我的机器上显示为我想要的，但在其他机器上尝试时，布局会切换为一行上的两个图像，然后是新行上的第三个图像。代码如下：

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

}





电话：07858740电子邮件：contact@millingtonandhope.com
html，正文
{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
}
身体
{
背景：rgb（171163144）；
文本对齐：居中；
最小宽度：600px；
}
#容器
{
保证金：0自动；
背景：rgb（171163144）；
宽度：80%；
}       
#标题
{
填充：0px；
颜色：白色；
宽度：100%；
文本对齐：居中；
}
#页脚{
位置：固定；
左：0px；
底部：0px；
高度：25px；
宽度：100%；
背景：rgb（151143124）；
边框顶部：纯色1px白色；
}
客户
{
颜色：白色；
利润率：3倍自动；
文本缩进：1cm；
文本对齐：左对齐；
}   
#出售
{
颜色：红色；
}
#盒子
{
位置：相对位置；
保证金：0自动；
宽度：100%；
高度：200px；
边缘顶部：100px；
}
#盒式img
{
保证金：0自动；
边框：纯色1px白色；
利润率：10px；
}
#框2
{
位置：相对位置；
利润上限：260px；
宽度：100%；
}
#框2 img
{
保证金：0自动；
不透明度：0.5；
过滤器：α（不透明度=50）；
}

有人能帮我解决这个问题吗？

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

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

您将框定义为相对，这最终意味着它会考虑浏览器大小等因素。你最好的办法是把每件事都确定为绝对位置，这样无论发生什么事情，它们都会处于那个位置。如果图像太大并超过浏览器的大小，它会导致滚动条等，但它会允许所有3个图像在所有窗口大小中并排放置。

如果您不指定它们，我们如何更正css？我的css包含在html之后。arkascha你看不出来吗？你说的是“框”中的图像吗？是的，“框”中的图像@user1356791请指定图像的高度和宽度，这样我们可以解决你的问题。我的css包含在html之后。你们看不出来吗？对不起，把它放在上面是更好的编码方式。我甚至都没看到。我将坚持我的解决方案。推理：您已将宽度设置为100%（即整个页面的宽度），如果页面（甚至包装器）不正确，这对您没有好处将div定义为绝对值是否太窄会使div不居中，而是向右移动？您必须使用该元素的其他CSS设置，因为它现在不引用自身周围的元素进行定位，因此您看到的偏移量与原来的偏移量相比。如果我还记得的话，它也不会以自身周围的其他元素为中心，因为它存在于自身的世界中，所以像将它与中心对齐这样的事情不会像给它绝对的X和Y坐标那样有效。