2

在我的页面左侧，我有一个徽标和一个链接列表，然后在右侧我有一个博客链接。当我将浏览器缩小时，博客链接会渗入左侧的链接。如何让博客链接在某个点停止移动？

链接到我的问题

下面是我遇到的问题的代码。

html

<div id='logo'>
<img src="MAIN_IMAGES/logo.png" width="255" height="71"></div>

<div id='nav'>   
      <a class="ex4" href="#">FOOTWEAR</a>           
      <a href="projects.html">PROJECTS</a>
      <a href="#dialog2" name="modal">CLIENTS</a>
      <a href="#dialog5" name="modal">ABOUT</a>          
      <a href="#dialog3" name="modal">CONTACT</a>
 </div>
 <div id='blog'> 
    <a href="http://ernsteverything.com/blog">BLOG </a>
</div>
<div id='blogM'> 
     <img src="MAIN_IMAGES/date_2.png" width="60" height="19">
</div>

CSS

#logo {top:17px;
       clear:both;
       float:left;
       position:absolute;
       left:45px;}
#nav {position:absolute;
      top:14px; 
      left: 385px;
      min-width:800px;
      white-space:nowrap;
      color:silver;}
#blog {position:absolute;
       top:14px;right:113px;
       list-style:none;
       font-family:"Gill Sans Light";
       font-style:normal;
       font-weight:400;
       text-decoration:none;
#blogM {position:absolute;
        top:13px;
        right:43px;}
4

1 回答 1

2

所以问题在于您定位元素的方式，您将它们放置为基于像素的坐标网格而不是 html 文档。虽然你可以这样做，但这将是一个巨大的痛苦。你必须记住 html 是由没有像素和网格的恐龙制作的，并且已经进化为适应这种情况但不能替代。

看看这个教程。您的 div 元素都是从 body 元素的尺寸绝对定位的。从理论上讲，元素将始终以这种方式重叠。但是，如果您将它们相对于彼此定位，则无论浏览器的尺寸如何，它们都应该一起工作。这个概念有点难以理解，所以你必须像恐龙一样思考。嵌套元素的工作方式很像在彼此旁边键入字母，而未嵌套元素就像在它们之间放置回车符的段落，使它们完全独立于它们周围的东西。

我对你的建议是摆脱整个 CSS 结构并重新开始。尝试重塑你的 DOM 类似

    <body>
        <div id='logo'>
        </div>
        <div id='nav'>
            <div id='blog'>
                <div id='bloglinks'>
                </div>
            </div>
        </div>
    </body>

这应该将它们排成一行，然后使用“左”等偏移它们以将它们放置在您想要的位置。这也是一个很好的方法来了解它是如何工作的。这一切都已经过时了，你真的必须考虑以某种与模块化思维背道而驰的方式进行设计。

于 2013-01-06T21:51:54.910 回答