gpt4 book ai didi

html - 当浏览器变小时,阻止左右链接相互渗透

转载 作者:行者123 更新时间:2023-11-28 00:12:42 28 4
gpt4 key购买 nike

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

link to my problem

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

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;}

最佳答案

所以问题在于您定位元素的方式,您将它们放置为基于像素的坐标网格而不是 html 文档。虽然你可以这样做,但这将是一个很大的痛苦。你要记住 html 是由没有像素和网格的恐龙制作的,并且已经演变为适应这一点而不是取代。

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

我对你的建议是摆脱整个 CSS 结构并重新开始。尝试 reshape 您的 DOM,例如

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

这应该将它们排成一行,然后使用“左”等将它们偏移以将它们放置在您想要的位置。 Here也是查看其工作原理的好方法。这一切都已经过时了,您真的必须考虑以某种与模块化思维相悖的直觉方式进行设计。

关于html - 当浏览器变小时,阻止左右链接相互渗透,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14186646/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com