Question

div有#popular，它位于屏幕的右侧，包含作者姓名。当我在分页中更改页面时，它会上下移动。我不知道为什么但是很头疼。

这是我的代码

CSS

 .item {
    position: absolute;
    margin:10px;
    margin-top:40px;
    margin-left:0px;
    margin-right:10px!important;
    width:  300px;
    height: auto;
    float: left;
    background: #ffff;
    font-size:20px !important;
    text-align:center;
    display: block;
    line-height: 1.42857143;
   -webkit-box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
   -moz-box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
    box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
   -webkit-filter: grayscale(00%);
   -moz-filter: grayscale(00%);
   -o-filter: grayscale(00%);
   -webkit-transition: all 0.1s ease; 
   -moz-transition: all 0.1s ease;
   -o-transition: all 0.1s ease;
   -ms-transition: all 0.1s ease;
    transition: all 0.1s ease;
  }

      .item:hover {
       -webkit-box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
       -moz-box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
        box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
       -webkit-transform: scale(1.005);
       -moz-transform: scale(1.005);
       -ms-transform: scale(1.005);
      -o-transform: scale(1.005);
       transform: scale(1.005);

       }
 .char a{
    color:white;
}
    #masonry{
height:auto; !important;
width:91.5% !important;


   }
  #popular{
      position:relative;
      margin-right: 10px;
      margin-left: 1750px;
      margin-top: -1000px ;
      margin-bottom:100px;
      float: left;
          }

HTML＆amp; PHP

     <div id='masonry'>


      <?php 

        //show records
        $query = mysqli_query($db,"SELECT * FROM {$statement} LIMIT  {$startpoint} , {$limit}");

        if($query === FALSE) { 
        die(mysqli_error($db)); // TODO: better error handling
                          }
        $count=1;

        while ($row = mysqli_fetch_assoc($query)) {
            $quote=$row['quote'];
            $name =$row['name'];

    ?>
    <div class="item">
     <?php echo "{$quote}";?><br>
      <?php echo "Author:- {$name}";?>
      </div>
      <?php 
    $count++;
    } 
    ?>

     </div>

     <script src='masonry.pkgd.min.js'></script>
     <script>
      var container = document.querySelector('#masonry');
      var masonry = new Masonry(container, {
      columnWidth: 50,
     itemSelector: '.item'
      });
      </script>

  <?php echo pagination($statement,$limit,$page);?> 
  <div id = "popular">
   <span> <h3> Popular Author </h3></span>
  <?php
     //show records
        $query1 = mysqli_query($db,"SELECT * FROM `author` WHERE popular = 1 order by name LIMIT 40");

        if($query1 === FALSE) { 
     die(mysqli_error($db)); // TODO: better error handling
                         }
        $count=1;

        while ($row = mysqli_fetch_assoc($query1)) {

            $name =$row['name'];
            $id   =$row['id'];

    ?>
    <div class="pop1"  >


<a      href="quotes.php?auth_id=<?php echo "$id";?>"><?php echo "$name";?></a>


</div>


   <?php 
    $count++;
    } 
    ?>
</div>

Answer 1

由于代码无法重现问题，因此很难分辨完全导致问题。

然而，只需查看#popular ...

#popular {
   position:relative;
   margin-right: 10px;
   margin-left: 1750px;
   margin-top: -1000px ;
   margin-bottom: 100px;
   float: left;
   }

......我建议如下：

尝试删除（或减少）那些巨大的边距空间。 margin-left: 1750px可能不是将#popular置于右侧的最佳方式。

您是否可能想要使用right，left，top和bottom offset properties，而不是margin-对应的人？< / p>

无论如何，一旦控制了边距，请尝试使用float: right代替float: left。

此外，如果您的目标是将#popular定位在屏幕上的某个位置，请尝试绝对定位。

#popular {
   position: absolute;
   right: ?px;
   left: ?px;
   top: ?px ;
   bottom: ?px;
   }

确保将position: relative应用于#popular的容器。

您可能需要查看这些文章以获取一些有用的信息：

每次页面刷新时，Div都会更改位置

1 个答案: