Question

我已经使用绝对定位将元素放置在图像的底部，它在Mac上看起来很棒，但在我的PC上定位得太高，即使在两台计算机上使用相同的浏览器也是如此。绝对定位HTML元素时，使用百分比，像素，em或英寸会是最好的吗？我对网络编程比较陌生，所以欢迎任何一般建议。谢谢！

HTML：

<div class = "article">

    <div class="title" onclick = "$('.aboutMe').fadeIn(500)">
            <p class = "slide"> ABOUT ME </p>
    </div> 

    <header>
        <h1> RAMON MIGUEL "RMI" FLORES </h1>
        <h2> Welcome to my personal website! </h2>
    </header>

    <img src = "tahoe2.jpg" alt = "Dorm Trip to Tahoe" title "Lake Tahoe" id = "tahoe">

    <div class = "subImages">
        <img src = "profile.jpeg" alt = "Profile Picture" id = "profile" onclick = "$('.aboutMe').fadeIn(500)"> 

        <div class="title" id = "socialTitle" onclick = "$('.socialMedia').fadeIn(500)">
            <p class = "slide"> SOCIAL MEDIA </p>
        </div> 
        <img src = "basketball.jpeg" alt = "Me Dunking" id = "basketball" onclick = "$('.socialMedia').fadeIn(500)">

        <div class="title" id = "contactTitle" onclick = "$('.contactMe').fadeIn(500)">
            <p class = "slide"> CONTACT ME </p>
        </div> 
        <img src = "contact.jpeg" alt = "Contact Me" id = "contact" onclick = "$('.contactMe').fadeIn(500)">
    </div>

    <footer>
        <p> &copy Ramon Flores 2012 </p>
    </footer>

</div>

CSS：

    body {
        background-color: #EDEDF3;
    }

    .article {
        border: 1px solid rgba(255, 204, 204, 0.25);
        background-color: #FFF;
        width: 80%;
        margin: 20px auto;
        padding: 0 20px;
        -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        border-radius: 25px;
        -moz-border-radius: 25px;
    }

    h1 {
        font-size: 65px;
        font-family: 'Quicksand', sans-serif;
        font-weight: 100;
        text-align: center;
        color: #333;
        text-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        letter-spacing: 0;
        margin-bottom: 0;
    }

    h2 {
        font-size: 20px;
        font-family: 'Raleway', 'Quicksand', sans-serif;
        font-weight: lighter;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        text-align: center;
        color: black;
        letter-spacing: 0;
    }

    #tahoe {
        width: 98.7%;
    }

    .article img {
        border: 5px solid #EDEDF3;
    }

    #profile, #basketball, #contact {
        width: 32%;
        height: 4.7in;
        border-radius: 25px;
        -moz-border-radius: 15px;
    }

    .subImages {
        display: inline;
    }

    footer {
        font-size: 15px;
        color: #B28F8F;
        text-align: center;
        font-family: 'Raleway', sans-serif;
    }

    footer p:hover { 
        color: black; 
        -webkit-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;   
    }

    .title {
        background-color: #66CCFF;
        width: 26%; 
        color: white;
        font-family: 'Quicksand', sans-serif;
        text-align: center;
        font-size: 30px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        -moz-border-bottom-right-radius: 20px;
        -moz-border-bottom-left-radius: 20px;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 1127px;
    }

    #socialTitle { left: 36.9%; }

    #contactTitle { left: 63.3%; }

很抱歉，如果有很多代码。我很新，我不确定问题出在哪里，所以我发布了很多内容。我想将“.title”元素放在“.subImages”类中3个图像的每个底部。这适用于Mac上的所有浏览器，但“.title”元素在PC上的所有浏览器上放置得太高。非常感谢你的帮助！

Answer 1

使用像素或英寸无关紧要：如果您希望元素位于底部，请使用bottom: 0;

看到这个小提琴，图像在容器div中。标题位于图像上方，位于容器的底部。我使用了颜色和半透明度，因此您可以看到标题实际上位于“图像”上方。

http://jsfiddle.net/GolezTrol/wp3Fd/

HTML元素在Mac上正确定位但在PC上无法定位

1 个答案: