1

第一篇文章和一个菜鸟。

我正在学习 html\css 并且通常在这里通过一些搜索来解决大多数问题。我似乎无法通过下面的页面解决这个问题。基本上我想要几个围绕一个包含隐藏文本的 div 的圆圈中的图像。当我将鼠标悬停（或稍后单击）图像时，应显示相关文本 - 然后在下一个图像悬停时隐藏\更改（想想人物和个人资料）

到目前为止，页面做了我想要的 - 全屏。当我缩小浏览器窗口时，文本保持不变，所有其他元素都移动。我知道我有位置：固定在图像 .hover 上，这就是问题所在。但是如果我将 :fixed 更改为任何其他值，它会中断吗？

我在这里阅读了很多答案，我花了几个小时试图弄清楚但失败了，现在我对我无法解决我确信这是一个非常简单的问题感到沮丧。

我想要的只是在调整浏览器窗口大小时将文本保持在图像圈中心的 div。我需要在此代码中进行哪些更改才能实现此目的？有没有更好的方法来做我想做的事？

我希望你能理解我的挫败感，不要给我太多时间 :-) 我以前从来没有遇到过定位问题——直到试图显示\隐藏一个 div。

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

<title>Untitled</title>

<style>

#image {
    position:relative;
    width:180px;
    height:140px;

}

#image .hover {
    display:none ;
    position:fixed;


}

#image:hover .hover {
    display:block;


}

#wrapper{
    width:960px;
    margin :0px auto ; 
    text-align: center ;
}

#banner{
    height:250px;
}

#content{


}


</style>

</head>

<body>

<div id="wrapper">

    <div id="banner"></div>

    <div id="content">


        <div id="image" style="left: 383px; top: 31px; width: 135px; height: 192px;">
            <img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>

            <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>

            </div>

        </div>

        <div id="image" style="left: 97px; top: -83px; width: 135px; height: 192px;">
            <img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>

            <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">

                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>

            </div>


        </div>


        <div id="image" style="left: 652px; top: -272px; width: 135px; height: 192px;">
            <img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>

            <div class="hover" style="left:  440px; top: 480px; width: 388px; height: 440px">

                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>

            </div>

        </div>


        <div id="image" style="left: 91px; top: 50px; width: 135px; height: 192px;">
            <img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>

            <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">

                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
            </div>

        </div>


        <div id="image" style="left: 370px; top: -80px; width: 135px; height: 192px;">
            <img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>

            <div class="hover" style="left:  440px; top:480px; width: 388px; height: 440px">

                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>


            </div>

        </div>


        <div id="image" style="left: 650px; top: -318px; width: 135px; height: 192px;">
            <img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>

            <div class="hover" style="left:  440px; top: 480px;width: 388px; height: 440px">

            <p>Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
            </div>

        </div>

</div>

</div>

</body>

</html>
4

1 回答 1

1

通常将 margin:auto 添加到元素可以工作，但对于 position 它可能不会。

您最好的选择是使用 JavaScript（甚至 jQuery）来获取屏幕高度和宽度。您可能还需要在调整大小时再次检查并获取屏幕尺寸。

这是一篇很好的文章，可以帮助您入门： Using jQuery to center a DIV on the screen

如果你不想使用 JS...

尝试这样的事情：http: //jsfiddle.net/RbFnm/10/

#box{margin: auto; background: #000; position: relative; z-index: 1; width: 300px; height: 300px;}
#subbox{background: #ccc; position: absolute; width: 50px; height: 50px; z-index: 3; top: 10px; left: 10px;}
#special{background: #ccc; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; margin: -45px 0 0 -45px; z-index: 5;}

以及垂直对齐的提示：http: //phrogz.net/css/vertical-align/

于 2013-03-26T20:08:46.460 回答