为什么向 div 添加新元素会推动整个 div 向上？

Question

这是一个非常奇怪的问题，我不知道从哪里开始。我尝试将 divs 从相对定位更改为绝对定位，但这似乎对问题没有影响。

当我的 #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;
}

app/views/galleries/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

它向上推是因为 #all_galleries div 绝对位于底部。

您最好为每一列使用浮动的 divs，让内容自然流动。你应该只在特殊情况下使用绝对定位，当没有其他方法可以完成这项工作时。

Answer 2

所以简单的答案是因为你正在使用 position: absolute 并且它的相对父级是 main 所以随着容器变大，你的 bottom 值不会保持一致。更大的问题是你的整个代码结构坦率地说是一团糟。它真的需要重组，我已经完成了。唯一的区别是我删除了 button 标签的使用，而是使用了 divs。

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%);
}

为什么向 div 添加新元素会推动整个 div 向上？

Why does adding new elements to a div push the entire div upwards?

html

css

ruby-on-rails