Question

我是网络开发人员的新手，需要一些帮助来解决这个简单的问题。调整大小时，菜单项会移动到名称下方，有人可以告诉我在哪里搞砸了吗？

我一直在阅读其他一些解决方案并得到这个想法，但却无法找到我的错误。

> 
<!doctype html>
<html>
<head>
    <title>About</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

 <style type="text/css">

    * {
        font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    }



    body {
        background-color: #FAFAFA;
        color: #2E2E2E;

    }

    #topmenu {
        float: right;
        padding-top: 10px;
        position: relative;

 }

    #topmenu ul {
         list-style:none;
         width: auto;


    }

    #topmenu li {
        float:left;
        padding: 5px 10px 0px 20px;
        margin-right: 20px; 
        border-right: 1px solid #47008F;
        text-decoration: underline;

    }

    a:hover {

        font-size: 20px;
    }

    a:link {
        color: #47008F;
    }


    #name {
        margin-bottom: 10px;
        padding-left: 20px;
        color: #47008F;
        display:inline-block;

    }

    #topcontainer {
        width: 100%;
        background-color: #A4A4A4;
        height: 60px;
        margin-bottom: 5px;
        font-family: Lucida Grande;
        margin-right: 50px;
        border-radius: 25px;
        float: left;

    }

    #break {
        background-color:#47008F;
        height: 1px;
        margin-bottom:5px;
        clear: both;
    }

    #midcontainer {

        clear:both
        padding-left: 50px

    }

    #midcontainer img {
        position: relative;
        height:300px;
        padding: 20px 200px 50px 200px;
        float: left;
        padding-right:50px;
    }

    #bio {
        padding-top: 75px;
        position: relative;
    }


 </style>


</head>

<body>

    <div id="topcontainer">




            <h1 id="name">Robert</h1>

            <div id="topmenu">

                <ul>
                    <li><a href="PersonalPage.html">About</a></li>
                    <li><a href="PersonalPageResume.html">Resume</a></li>
                    <li><a href="PersonalPagePortfolio.html">Portfolio</a></li>
                    <li><a href="PersonalPageContact.html">Contact</a></li>
                </ul>

            </div>

        </div>


        <div id="break"></div>
    </div>



    <div id="midcontainer">

    <img src="images/me.jpg"/>

        <div id="bio">

            <p>
            <h3> Text goes here.............</h3>
                <p>
                something
                </p>

            </p>

        </div>

    </div>

</body>
</html>

Answer 1

我评论了顶部容器的“高度”，并删除了不需要的关闭div标签。它适用于Chrome。

<!doctype html>
<html>
<head>
    <title>About</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

 <style type="text/css">

    * {
        font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    }


    body {
        background-color: #FAFAFA;
        color: #2E2E2E;

    }

    #topmenu {
        float: right;
        padding-top: 10px;
        position: relative;

 }

    #topmenu ul {
         list-style:none;
         width: auto;


    }

    #topmenu li {
        float:left;
        padding: 5px 10px 0px 20px;
        margin-right: 20px; 
        border-right: 1px solid #47008F;
        text-decoration: underline;

    }

    a:hover {

        font-size: 20px;
    }

    a:link {
        color: #47008F;
    }


    #name {
        margin-bottom: 10px;
        padding-left: 20px;
        color: #47008F;
        display:inline-block;

    }

    #topcontainer {
        width: 100%;
        background-color: #A4A4A4;
        /*height: 60px;*/
        margin-bottom: 5px;
        font-family: Lucida Grande;
        margin-right: 50px;
        border-radius: 25px;
        float: left;

    }

    #break {
        background-color:#47008F;
        height: 1px;
        margin-bottom:5px;
        clear: both;
    }

    #midcontainer {

        clear:both
        padding-left: 50px

    }

    #midcontainer img {
        position: relative;
        height:300px;
        padding: 20px 200px 50px 200px;
        float: left;
        padding-right:50px;
    }

    #bio {
        padding-top: 75px;
        position: relative;
    }


 </style>


</head>

<body>

    <div id="topcontainer">
        <h1 id="name">Robert</h1>
        <div id="topmenu">
            <ul>
                <li><a href="PersonalPage.html">About</a></li>
                <li><a href="PersonalPageResume.html">Resume</a></li>
                <li><a href="PersonalPagePortfolio.html">Portfolio</a></li>
                <li><a href="PersonalPageContact.html">Contact</a></li>
            </ul>

        </div>
        <div id="break"></div>
    </div>

    <div id="midcontainer">

        <img src="images/me.jpg" />

        <div id="bio">

            <p>
                <h3>Text goes here.............</h3>
                <p>
                    something
                </p>

            </p>

        </div>

    </div>

</body>
</html>

Answer 2

我需要添加另一个div包装我的所有html并将边距设置为auto，宽度为960px。解决！

调整窗口大小时，Div移动到其他div下方

2 个答案: