Question

我已经浏览了谷歌并查看了另一个问题：Page elements moving on window resize我仍然无法找到答案。我的问题是，当我调整浏览器的大小时，我的导航栏移动的顶部div元素会弄乱网站的外观。由于CSS有一定数量的正确CSS可能会更新页面的外观，因为我正在调整它。如何防止元素在页面大小调整时移动？

我当前的代码

         <div id="top" style="background-image: url(images/Home/space.gif); height: 120px; width: 100%; border: 1px solid black;">
            <a href="contact.html">
            <img id="buttoncontact" alt="Contact" src="images\Logo\contact.png">
            </a>
            <a id="plugins" alt="Plugins" href="http://bukkit.org/" target="_blank"> +Bukkit</a>
            <a href="home.html"><img id="bukkiticon" src="images\Logo\bukkit.png"></a>
            <a id="twitter" alt="Twitter" href="https://twitter.com/" target="_blank"> +Twitter</a>
            <a href="https://www.twitter.com/"><img id="twittericon" src="images\Logo\twitter.png"></a>
            <a id="youtube" alt="YouTube" href="https://www.youtube.com/" target="_blank"> +YouTube</a>
            <a href="https://www.youtube.com/"><img id="yticon" src="images\Logo\youtube.png"></a>
            <img id="td6img" src="images\Logo\TD6.png">
            <nav id="navigation">
                <a id="navigation-anchor-normal" href="contact.html">
                    <img src="images\Home\mars.png">
                </a>
                <a id="navigation-anchor-normal" href="projects.html">
                    <img src="images\Home\merc.png">
                </a>
                <a id="navigation-anchor-current" href="home.html">
                    <img src="images\Home\sun.png">
                </a>
                <a id="navigation-anchor-normal" href="lessons.html">
                    <img src="images\Home\nept.png">
                </a>
                <a id="navigation-anchor-normal" href="donate.html">
                    <img src="images\Home\jupiter.png">
                </a>
            </nav>
        </div>

CSS

#top
{
    background-image: url("images/Home/stars.png");
    height: 95px;
    border: 1px solid black;
    width: 100%;
    position: fixed;
    top:0;
    left:0;
    background: rgba(255,255,255,1);
    z-index: 100;
   -webkit-box-shadow:0px 0px 20px rgba(44,44,44,.3);
}
#buttoncontact
{
    float:left;
}
#yticon
{
    position:absolute;
    right:300px;
}

#youtube
{
text-decoration:none;
position:absolute;
right:225px;
color:red;
}

#twittericon
{
position:absolute;
right:190px;
}

#twitter
 {
 text-decoration:none;
 position:absolute;
 right:130px;
 color:aqua;
 }

#bukkiticon
{
position:absolute;
right:95px;
}

#plugins
{
text-decoration:none;
position:absolute;
right:35px;
color:#FF8000;
}
#navigation
{
    text-align:center;
}
#navigation-anchor-normal
{
    text-decoration:none;
    color:aqua;
    display:inline-block;
    padding:5px 8px;
}
#navigation-anchor-current
{
    text-decoration:none;
    color:aqua;
    display:inline-block;
    padding:5px 8px;
}

唯一没有移动的元素是导航上方的TD6img。当我调整窗口大小时，其他一切都在移动。

我想要完成的是让这些元素在调整窗口大小时保持不变，而不是随着调整大小而移动。

这只发生在这个div元素上，没有其他div元素。

Answer 1

您要做的是创建一个自适应网站。

我强烈建议您使用现有的框架，而不是试图通过自己重做所有。

为此，请查看twitter bootstrap这是最强大，最有效的jquery / javascript响应式设计框架。

Answer 2

如果您仍然希望获得有关任务的帮助，请查看此DEMO不确定这是否是您要查找的内容，但如果您愿意，可以使用它。当你获得足够的代表时，你也可以对我的答案进行投票。我将大部分position:absolute转换为float:right

Answer 3

如果您正在寻找易于使用且不需要进行大量更改的内容，您还可以使用＆＃34;框架＆＃34;从这里：http://www.responsivegridsystem.com/

它不是太重，只能为您提供使网站响应所需的内容。我正在将它用于公司。

在我看来，Twitter引导程序很好，但它很重，虽然大多数类都没有加载，但更改/修改代码非常繁忙。

HTML元素继续调整浏览器的大小

3 个答案: