如何將這個div放在另一個旁邊？

我想製作一個網站，只是爲了看看我是否喜歡這樣做以及它會如何結果，但我似乎無法完成此部分。我希望「信息」div位於「vertmenu」div旁邊，並填充白色部分，我希望「vertmenu」div延伸至「voetregel」div。我不知道如何做到這一點，我已經嘗試將寬度和高度更改爲百分比，將位置更改爲絕對/相對並添加浮動屬性，但我無法讓它變成我想要的樣子。所以我的問題總之，我怎樣才能使「信息」div旁邊的「vertmenu」div，並填補白色部分，並獲得「vertmenu」div延伸至「voetregel」div。如何將這個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>

來源

2017-07-15 xX4m4zingXx

CSS的Flex-Box的能有所幫助。見：http：//the-echoplex.net/flexyboxes/ – localghost

適用float:left; CSS在#vertmenu和#informatie

，並在不使用#voetregel使用clear:both;它position:fixed;將清除上述2 div標籤

的浮動效果position:fixed;用於在網站中創建菜單欄，以便即使菜單欄在同一位置停留的滾動

來源

2017-07-15 13:17:09 Nihal

您可以添加display: inline-block使它們彼此相鄰。請從#voetregel刪除position:fixed。

#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>

來源

2017-07-15 13:18:48 James

我接受了其他答案，因爲沒有明確：兩者;在#voetregel中，綠色的東西是浮動的：http://prntscr.com/fw3230 – xX4m4zingXx

@ xX4m4zingXx是的，不用擔心！ – James

如何將這個div放在另一個旁邊？

回答

相關問題