为什么在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，让内容自然流动。在没有其他任何工作的情况下，您应该只在特殊情况下使用绝对定位。