0

我使用绝对定位将元素放置在图像的底部，它在 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 上的所有浏览器上放置得太高了。非常感谢你的帮助！

4

1 回答 1

0

无论您使用像素还是英寸都没有关系：如果您希望元素位于底部，请使用bottom: 0;

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

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

于 2012-09-11T20:46:24.010 回答