gpt4 book ai didi

html - 使用 CSS 定位导航栏

转载 作者:太空狗 更新时间:2023-10-29 13:31:03 24 4
gpt4 key购买 nike

我无法将垂直导航栏定位到内容 Div 的左侧。这是我拥有的和我想要的:

enter image description here

问题在于它是一个固定位置,因此对于不同尺寸的显示器来说它是不同的。所以我猜我需要相对定位,但我不太确定该怎么做。

HTML

<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href= "styles/styling.css" />
</head>

<div class="container">
<ul class="nav">.....(Just nav bar stuff)


<div class="content">
<h1>abcd</h1>

<p>abcd</p>
</div>

CSS

.content { 
background-color: #FFFFFF;
width: 650px;
padding: 20px;
margin: auto;
word-wrap: break-word
}

.container {
position: fixed;
top: 151px;
left: 420px;
}

谢谢!

最佳答案

固定位置将帮助您在向下滚动时保持菜单可见。否则,您不应使用它。

<div class="container">
<div class="one-third column">
<ul class="yourmenu">xxx</ul>
<div class="filler"></div>
</div>
<div class="two-thirds column">
Your page content here
</div>
</div>

<style>
.container {width:960px;margin:auto;}
.column {float:left;position:relative;}
.one-third {width:320px;}
.two-thirds {width:640px;}
.filler {width:100%;height:10px;}
.yourmenu {position:fixed;top:100px;} /* do not define left, because it will fix the screen and not the column div */
</style>

关于html - 使用 CSS 定位导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27489927/

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