我想做一个网站，只是想看看我是否喜欢这样做以及结果如何，但我似乎无法完成这部分。我希望“informatie”div 位于“vertmenu”div 旁边并使其填满白色部分，我希望“vertmenu”div 延伸到“voetregel”div。我不知道如何完成这项工作，我已经尝试将宽度和高度更改为百分比，将位置更改为绝对/相对并添加一个浮动属性，但我无法做到我想要的样子。所以我的问题简而言之，我怎样才能在“vertmenu”div旁边制作“informatie”div并让它填满白色部分并使“vertmenu”div延伸到“voetregel”div。
body {
margin:0;
padding:0;
background-color:#ffffff;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
#hormenu {
background-color: rgba(0, 0, 0, 0.5);
position:relative;
text-align: center;
width:100%;
height:15%;
line-height:50px;
font-size:100%;
}
#vertmenu {
background-color: rgba(255,0,0, 0.3);
position:relative;
height:100px;
top:15%;
width:15%;
margin:0px 0px 0px 0px;
padding:3px;
overflow:hidden;
}
#informatie {
background-color: rgba(0,0,255, 0.3);
position:relative;
float:left;
height:100%;
width:85%;
left: calc(15% + 6px);
margin:0px 0px 0px 0px;
padding:3px;
overflow:hidden;
}
#voetregel {
background-color: rgba(0,255,0, 0.3);
position:fixed;
width:100%;
height:100px;
top:auto;
right:0;
bottom:0;
margin-left:10px
}
a.hormenu_item {
margin: 10px;
transition: color 0.3s, text-shadow 0.3s, text-decoration-line 0.3s, font 0.3s ease-in-out;
}
a:link.hormenu_item {
color: white;
text-decoration: none;
}
a:visited.hormenu_item {
color: white;
text-decoration: none;
}
a:hover.hormenu_item {
color: gold;
text-decoration:none;
text-shadow: 0px 0px 7px gold;
font-size: 30px;
}
#informatie h1, #vertmenu h1, #voetregel h2 {
color:#FF0000;
font-size:20px;
}<body>
<div id="hormenu">
<a href="" class="hormenu_item">Home</a>
<a href="" class="hormenu_item">Biografie</a>
<a href="" class="hormenu_item">Features</a>
<a href="" class="hormenu_item">Contact</a>
</div>
<div id="vertmenu">
<h1>vertmenu</h1>
</div>
<div id="informatie">
<h1>informatie</h1>
</div>
<div id="voetregel">
<h2>voetregel</h2>
</div>
</body>float:left;在 #vertmenu 和 #informatie 中应用css
并且不要position:fixed;在 #voetregel 中使用clear:both;它会清除上面 2 个 div 标签的浮动效果
position:fixed; 用于在网站中创建菜单栏，以便即使滚动菜单栏也保持在同一位置
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句