Question

我有一个网站。它非常简单，只是在其中间和左侧的一列文本导航列，其中包含指向我页面的链接。当我在我的网站上调整浏览器窗口大小时，使窗口变小会导致文本列覆盖导航列。虽然这在具有宽屏显示器和高分辨率的计算机上不是问题，但对于某些人来说这是一个问题，因为窗口的大小，他们加载页面并找到已经覆盖导航列的文本列。当调整窗口大小时，如何使我的导航栏随文本列移动，而不是根本不移动并在调整窗口大小时被遮盖？

链接位于一个div中，文本位于不同的div中。这是css：

#links {
position: relative;
float: left;
left: 18em;
font-family: arial;
}
#content {  
position: relative;
font-family: arial, helvetica;
top: -4em;
width: 560px;

border-style: solid;
border-color: 36a2c1;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
background-color: white;
margin-left: auto;
margin-right: auto;
padding-top: 0em;
padding-bottom: 1em;
padding-left: 3em;
padding-right: 3em;
}

Answer 1

我猜你的侧边栏菜单是绝对定位的（css：position: absolute; right: 0;），它将其从普通文档流中删除。当窗口缩小时，你可以做的就是不要让它滑过顶层的其他内容，因为它不再真的“在”文档中了。

通常的解决方法是在父容器上放置一个min-width，这样它就不会收缩到某个限制以下（css：min-width: 100px;）。当然，IE6和更老版本根本不支持min-width，但是有1px高的隐形图像，无法包装的固定宽度内容等...

Answer 2

试试这段代码。我只是添加浮动到两个divs链接到左边和内容到右边

#links {
position: relative;
float:left;
font-family: arial;
background-color:#171817;
width:100px;
height:300px;
margin-right:10px;
}
#content {  
position: relative;
float:right;
font-family: arial, helvetica;
top: -4em;
width: 560px;
height:300px;

background-color:#ffff12;

border-style: solid;
border-color: 36a2c1;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
background-color: white;
margin-left: auto;
margin-right: auto;
padding-top: 0em;
padding-bottom: 1em;
padding-left: 3em;
padding-right: 3em;
}

调整窗口大小会隐藏我的导航侧边栏

2 个答案: