Question

我正在为一个客户建立的网站添加一些图片，由于某些原因，当我更改分辨率时，一些图片会覆盖其他图片，而有些图片则没有。我正在以相同的方式添加所有图片，所以我有些困惑，为什么有些人静态定位。

HTML图片

<!DOCTYPE HTML>
<!-- Website Template by freewebsitetemplates.com -->
<html>
<head>
    <meta charset="UTF-8">
    <title>Jay Cousins</title>
    <link rel="stylesheet" href="css/site.css" type="text/css">
</head>
<body>
    <div id="header">
            <img  id="papa" src="newImages/papaPic.jpg">
            <img id ="jaytext" src="newImages/jaycousins.png">
            <img id ="darkTextBackground" src="newImages/darktextbackgroubd.jpg">
            <img id ="commercialtext" src="newImages/commercialtext.png">
            <img id ="leftsidebackground" src="newImages/leftsidebackground.jpg">


        <ul>
            <li class="selected">
                <a href="index.html">home</a>
            </li>
            <li>
                <a href="about.html">Opportunities</a>
            </li>
            <li>
                <a href="admission.html">Project Management</a>
            </li>
            <li>
                <a href="programs.html">About Jay</a>
            </li>
            <li>
                <a href="calendar.html">Community</a>
            </li>
            <li>
                <a href="blog.html">Contact</a>
            </li>

        </ul>
    </div>

CSS

body {
    background: url(../newImages/headerBackground.jpg) repeat;
    font-family: Arial, Helvetica, sans-serif;
    //font-size: 14px;
    margin: 0;
    padding: 0;    

}
#header {
    background: url(../images/bg-header.png) repeat-x bottom center;
    margin: 0;  
        text-align: center;
        display: block;
        height:290px;  //height for adjust picture

}
#papa {
    display: block;     
    margin: 0 auto; 
    width: 430px;
        margin-left:0px;           
        height:270px;    //
}
#jaytext{
    position: absolute;
    top:5.5%;
    left:31.7%;

}
#darkTextBackground{
    width:550px;
    height:73px;
    position:absolute;
        top:24.2%;
        left:31.8%; 
}
#commercialtext{
    height:57px;
    width:550px;
    position:absolute;
           top:23.5%;
           left:29.0%;
}
#leftsidebackground{
    width:300px;
    height:523px;
    position:absolute;
    left:0%;
}
#text{
    position:absolute;
    top:0%;

}

#header ul {
    background: url(../images/menu-border.gif) no-repeat bottom left;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 0 0px 1px;
    width: 970px;

        position:relative;
        left:5%;


}

#header ul li {
    background: url(../images/bg-menu.gif) repeat-x bottom center;
    border-top: 2px solid #4f5342;
    float: left;
    list-style: none;
    margin: 0;


}
#header ul li a {
    background: url(../images/menu-border.gif) no-repeat bottom right;
    color: #93958b;
    display: block;
    font-size: 14px;
    height: 42px;
    letter-spacing: 1px;
    line-height: 42px;
    margin: 0;
    padding: 0 31px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
#header ul li.selected a {
    color: #4c4d3d;
    background: #e5e5e5;
}
#header ul li a:hover {
    color: #c0c3b4;
}

Answer 1

如果你在这里有固定数量的图像然后将它们包装在div中并设置div以下属性div {-webkit-column-count：5; / * Chrome，Safari，Opera / - moz-column-count：5; / Firefox * / column-count：5;}

当我更改分辨率大小时，图片会覆盖其他图片吗？

1 个答案: