如何修复CSS元素的位置？

Question

I would like to create a website with a tile layout, similar to the new Windows style. https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/jquery4u/2013/03/metro-template.png <- kind of like this, except that in my case:

1. each tile is the same size (square) (.box)
2. The text should be in the centered in the tile (.center-box-content)
3. each tile should entail two buttons in its lower right corner, in addition to the text (.lower-right-box-content) The buttons are edit and trash icons, so that the text in the tiles can be changed.

I have accomplished this, but the problem is: The buttons seem to be dependent on the text length.

I've assigned them an absolute position in the css file, yet they don't stay put.

If the text in the tile is longer, they move all the way past/beyond the tile's borders, which they shouldn't surpass. It's a complete mess. I have tried everything but I can not find a solution. I am hoping that you guys can take a look and maybe see what I am missing? Here's my CSS Code:

.box {
    width: 200px;
    height: 200px;
    margin: 2px;
    color: whitesmoke;
    float: left;
    padding: 7px;
}


.center-box-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.lower-right-box-content {
    position: absolute;
    float: right;
    padding: 2px;
    bottom: -60px;
    right: -5px;
}

.red-box {
    background-color: indianred;
}

.blue-box {
    background-color: deepskyblue;
}

.green-box {
    background-color: mediumseagreen;

}

Here is my HTML Code: (The PHP bit just reads out the text from the data base, which is an event name, event description, and event date)

 <!--the entire square tile -->
 <div class="box red-box" height="100%" width="100%">
      <!--this centers the text within the tile -->
      <div class="center-box-content">
      <!--echo the name -->
      <b><?php echo $row["title"]; ?></b>

      <!--echo the description -->
      <?php echo $row["description"]; ?>

      <br> • <!--echo the date -->
      <?php echo $row["date"]; ?> •

          <!--edit and delete button in the lower right corner of the tile -->
          <!--this is the part that keeps moving as the text gets longer -->
          <div class="lower-right-box-content">
               Upcoming Events <span style="display:inline-block; width: 20px;"></span>
               <a href="#">
                <span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button"> </span>
                </a>

                <a href="deleteevent.php?id=<?php echo $row["eventid"];?>">
                <span class="glyphicon glyphicon-trash glyphicon-trash" role="button"></span>
                </span>

                </a>
           </div>


       </div>
</div>
    <?php };
        ?>

Answer 1

For ideal management of "box" today we use the grid. One example css for 6-columns grid:

body {
  font-family: 'Ariel', sans-serif;
  font-weight: 100;
  font-size: 1em;
  color: #faf3bc;
  background-color: #0976B2;
}

.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% */
.grid_2 { width: 32.5%; } /* 260px/800px = 32.5% */
.grid_3 { width: 49.375%; } /* 395px/800px = 49.375% */
.grid_4 { width: 65.625%; } /* 525px/800px = 65.625% */
.grid_5 { width: 83.125%; } /* 665px/800px = 83.125% */
.grid_6 { width: 100%; } /* 800px/800px = 100% */

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
  /* margin-right: 1.25%; */
  float: left;
  display: block;
}
.last {margin-right:0; }

.container{
  clear:both;
  width: 90%;
  max-width: 800px;
  padding: 0% 0;
  margin: auto;
}
img {
  max-width: 100%;
}
h1 {
  color: #ffffff;
}

a:link {color:#b4c34f; text-decoration:none;}      /* unvisited link */
a:visited {color:#b4c34f; text-decoration:none;}  /* visited link */
a:hover {color:#faf3bc; text-decoration:underline;}  /* mouse over link */
a:active {color:#b4c34f; text-decoration:none;}  /* selected link */

a.selected {color:#ffffff;}  /* selected link */

ul {
  list-style-type:none;
}

.form-input {
  height: 30px;
}
   @media screen and (max-width : 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
  width: 100%;
}}

HTML for 3 "box" in raw:

<div class='grid_2'>
</div>
<div class='grid_2'>
</div>
<div class='grid_2 last'>
</div>

HTML for 2 "box" in raw:

<div class='grid_3'>
</div>
<div class='grid_3 last'>
</div>

Maybe you need more grid-columns, go ahead, learn responsive web design.