Question

我想创建一个网站，只是为了看看我是否喜欢这样做以及结果如何，但我似乎无法完成这一部分。我希望“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>

Answer 1

在#vertmenu和#informatie

中应用float:left; css

并且不要在#voetregel中使用position:fixed;使用clear:both;它将清除以上2个div标签的浮动效果

position:fixed;用于在网站中创建菜单栏，以便即使滚动菜单栏仍保持在同一位置

Answer 2

您可以添加display: inline-block以使它们彼此相邻。从position:fixed删除#voetregel。

#vertmenu {
  background-color: rgba(255,0,0, 0.3);
  width:15%;
  margin:0px 0px 0px 0px;
}

#informatie {
  background-color: rgba(0,0,255, 0.3);
  width:85%;
  margin:0px 0px 0px 0px;
}

#voetregel {
  background-color: rgba(0,255,0, 0.3);
  width:100%;
  height:200px;
}

#vertmenu,
#informatie {
  display: inline-block;
  float: left;
}

#informatie h1, 
#vertmenu h1, 
#voetregel h2 {
  color:#FF0000;
  font-size:20px;
}

<div id="vertmenu">
 <h1>vertmenu</h1>
  </div>

 <div id="informatie">
 <h1>informatie</h1>
  </div>

 <div id="voetregel">
 <h2>voetregel</h2>
  </div>

如何将此div放在另一个旁边？

2 个答案: