爲什麼向div添加新元素會向上推動整個div？

Question

這是一個非常奇怪的問題，我不知道從哪裏開始。我嘗試將我的div從相對定位改爲絕對，但似乎對這個問題沒有影響。

當在我#all_galleries div元素一定數量它是否正確對齊：

但是，如果我添加了太多的元素在div被向上推：

爲什麼當元素被添加到它時，這個div被向上推動？

的main.css

body { 
    background-color: rgb(238, 238, 238); 
    font-family: "Comic Sans MS"; 
} 

main { 
    width: 80%; 
    margin: 0 auto 0 auto; 
    height: 700px; 
} 

header { 
    background-color: black; 
    position: absolute; 
    width: 100%; 
    top: 0px; 
    left: 0px; 
} 

h1 { 
    color: #2F96E8; 
    display: inline-block; 
} 

h1 a { 
    color: inherit; 
    text-decoration: none; 
} 

#search_query { 
    height: 18px; 
    width: 200px; 
} 

#new_search { 
    position: absolute; 
    right: 80px; 
    top: 30px; 
    display: inline-block; 
} 

#signout { 
    position: absolute; 
    right: 76px; 
    top: 10px; 
} 

main { 
    position: relative; 
    top: 100px; 
    text-align:center; 
} 

#create_gallery { 
    background-color: rgb(96, 201, 231); 
    color: white; 
    width: 20%; 
    height: 50%; 
    font-size: 250%; 
} 

#create_group { 
    background-color: rgb(141, 197, 62); 
    color: white; 
    width: 20%; 
    height: 50%; 
    font-size: 250%; 
} 

#galleries_tagline { 
    position: relative; 
    bottom: 170px; 
    right: 80px; 
    color: white; 
    font-size: 20px; 
} 

#groups_tagline { 
    position: relative; 
    bottom: 220px; 
    left: 130px; 
    color: white; 
    font-size: 20px; 
} 

.gallery_image { 
    display: block; 
    margin: 0 auto 0 auto; 
    width: 30%; 
} 

#groups { 
    text-align: left; 
} 

#groups li { 
    padding: 20px 0 20px 0; 
} 

#all_groups { 
    display: inline-block; 
    position: absolute; 
    bottom: 131px; 
} 

#all_galleries { 
    position: absolute; 
    bottom: 55px; 
    left: 350px; 
    display: inline-block; 
} 

#login { 
    color: white; 
    text-decoration: none; 
} 

應用程序/視圖/畫廊/ index.html.erb

<h2>Choose Your Creation</h2> 
<%= link_to '<button type="button" id="create_gallery">Galleries</button>'.html_safe, new_gallery_path %> 
<%= link_to '<button type="button" id="create_group">Groups</button>'.html_safe, new_group_path %> 
<p class="tagline" id="galleries_tagline">Show some pix</p> 
<p class="tagline" id="groups_tagline">Share with friends</p> 

<div id="all_galleries"> 
<h3>Current Galleries</h3> 
    <% @galleries.each do |gallery| %> 
    <p><%= link_to gallery.name, gallery %></p> 
    <% end %> 
</div> 

<div id="all_groups"> 
    <h3>Current Groups</h3> 
    <% @groups.each do |group| %> 
    <p><%= link_to group.name, group %></p> 
    <% end %> 
</div> 

Answer 1

所以最簡單的答案是因爲您使用的是position: absolute及其相對父值爲main，因此容器變大，您的bottom值不保持一致。更大的問題是你的整個代碼結構很坦白地說是一團糟。它確實需要我進行重組。唯一的區別是我刪除了button標籤的使用並使用div代替。

FIDDLE

HTML

<main> 
    <h2>Choose Your Creation</h2> 

    <div class="button-wrapper">   
    <a href="/galleries/new" class="button-container"> 
     <div id="create_gallery" class="button gallery"> 
      <div class="text-wrapper"> 
      Galleries 
      <p class="tagline" id="galleries_tagline">Show some pix</p> 
      </div> 
     </div> 
    </a> 

    <div id="all_galleries"> 
     <h3>Current Galleries</h3> 
     <p><a href="/galleries/1">Barbecue listing</a></p> 
     <p><a href="/galleries/2">Outback Crocz!</a></p> 
     <p><a href="/galleries/3">leet pix</a></p> 
     <p><a href="/galleries/4">Mountains</a></p> 
     <p><a href="/galleries/6">Star-Trek-Memes</a></p> 
     <p><a href="/galleries/1">Barbecue listing</a></p> 
     <p><a href="/galleries/2">Outback Crocz!</a></p> 
     <p><a href="/galleries/3">leet pix</a></p> 
     <p><a href="/galleries/4">Mountains</a></p> 
     <p><a href="/galleries/6">Star-Trek-Memes</a></p> 
    </div> 

    </div> 

    <div class="button-wrapper">  
     <a href="/groups/new" class="button-container"> 
     <div id="create_group" class="button group"> 
      <div class="text-wrapper"> 
       Groups 
       <p class="tagline" id="groups_tagline">Share with friends</p> 
      </div> 
     </div> 
     </a> 

     <div id="all_groups"> 
     <h3>Current Groups</h3> 
     <p><a href="/groups/1">Hip photographers anon</a></p> 
     <p><a href="/groups/2">Camper Clan</a></p> 
     <p><a href="/groups/3">Crocodiles Anonymous</a></p> 
     </div> 
    </div>  

</main> 

新增CSS

.button-wrapper{ 
    display: inline-block; 
    vertical-align: top; 
    height: 100%; 
} 

.button-wrapper a.button-container{ 
    display: block; 
    height: 50%; 
    text-decoration: none; 
} 

.button{ 
    height: 100%; 
    color: white; 
    font-size: 250%; 
    border-top: 2px solid #cccece; 
    border-left: 2px solid #cccece; 
    border-bottom: 2px solid #68797e; 
    border-right: 2px solid #68797e; 
    padding: 10px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.button.gallery{ 
    background-color: #60c9e7; 
} 

.button.groups{ 
    background-color: #60c9e7; 
} 

.text-wrapper{ 
    vertical-align: middle; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Answer 2

它向上推，因爲#all_galleries DIV絕對定位的底部。

您可能會更好地爲每列使用浮動div，並讓內容自然流動。在沒有其他工作的情況下，您只能在特殊情況下使用絕對定位。